Scribd
Upload
61 views

HTML Canvas

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
61 views

HTML Canvas

PROGRAMMING

Uploaded by

10300 PEDDI KISHOR
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via
JavaScript.

The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and
adding images.

Canvas is supported by all major browsers.

A canvas is a rectangular area on an HTML page. By default, a canvas has no


border and no content.

The markup looks like this:

Draw a Line
<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
Draw a Circle
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

Draw a Text
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

Draw Image
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
</script>

You might also like