HTML Canvas

HTML5 Canvas

The HTML <canvas> element is used to draw graphics on a web page.

The graphic to the left is created with <canvas>. It shows four elements: a red rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

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 Examples

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:

<canvas id=”myCanvas” width=”200″ height=”100″></canvas>

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute.

 

Here is an example of a basic, empty canvas:

 

<!DOCTYPE html>

<html>

<body>

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #000000;”>

Your browser does not support the HTML5 canvas tag.

</canvas>

 

</body>

</html>

 

Draw a Line

 

<!DOCTYPE html>

<html>

<body>

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>

var ctx = c.getContext(“2d”);
ctx.moveTo(00);
ctx.lineTo(200100);
ctx.stroke();

 

</body>

</html>

 

Draw a Circle

<!DOCTYPE html>

<html>

<body>

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.beginPath();
ctx.arc(95504002 * Math.PI);
ctx.stroke();

</script> 

 

</body>

</html>

 

Draw a Text

<!DOCTYPE html>

<html>

<body>

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.fillText(“Hello World”1050);

</script>

 

</body>

</html>

 

Stroke Text

<!DOCTYPE html>

<html>

<body>

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);
ctx.font = “30px Arial”;
ctx.strokeText(“Hello World”1050);

</script>

 

</body>

</html>

 

Draw Linear Gradient

<!DOCTYPE html>

<html>

<body>

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);

// Create gradient
var grd = ctx.createLinearGradient(002000);
grd.addColorStop(0“red”);
grd.addColorStop(1“white”);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(101015080);

</script>

 

</body>

</html>

 

Draw Circular Gradient

<!DOCTYPE html>

<html>

<body>

 

<canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.</canvas>

 

<script>

var c = document.getElementById(“myCanvas”);
var ctx = c.getContext(“2d”);

// Create gradient
var grd = ctx.createRadialGradient(755059060100);
grd.addColorStop(0“red”);
grd.addColorStop(1“white”);

// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(101015080);

</script>

 

</body>

</html>

 

Draw Image

<!DOCTYPE html>

<html>

<body>

 

<p>Image to use:</p>

<img id=”scream” src=”img_the_scream.jpg” alt=”The Scream” width=”220″ height=”277″>

 

<p>Canvas to fill:</p>

<canvas id=”myCanvas” width=”250″ height=”300″

style=”border:1px solid #d3d3d3;”>

Your browser does not support the HTML5 canvas tag.</canvas>

 

<p><button onclick=”myCanvas()”>Try it</button></p>

 

<script>

function myCanvas() {

 var c = document.getElementById(“myCanvas”);

var ctx = c.getContext(“2d”);
var img = document.getElementById(“scream”);
ctx.drawImage(img, 1010);

}

</script>

 

</body>

</html>

 

Image to use:

The Scream

Canvas to fill: