HTML Canvas

HTML5 element <canvas> tag gives you a powerful way to draw graphics using JavaScript.
canvas is a part of the HTML5 specification for next-generation web technologies.
The HTML 5 <canvas> tag is used to draw graphics using a scripting language like JavaScript.
There are some methods in canvas to draw paths, boxes, circles, text and add images.

Create HTML Canvas:

Example:

Understanding Canvas Coordinates:

The term canvas is a two-dimensional rectangular area. The coordinates of the top-left corner of the canvas are (0, 0) which is known as origin, and the coordinates of the bottom-right corner are (canvas width, canvas height).

If you want to draw a circle on the canvas, you can use the arc() method:

Example:

arc(x, y, r, start, stop)

use one of the ink() methods, like stroke() or fill():

Example:

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

var c = document.getElementById("ourCanvasCircle");

var cctx = c.getContext("2d");

ctx.beginPath();

ctx.arc(95,50,40,0,2*Math.PI);

ctx.stroke();

</script>

Draw Line on Canvas:

If you want to draw a straight line on the canvas, you can use the following two methods.

moveTo(x,y): It is used to define the starting point of the line.

lineTo(x,y): It is used to define the ending point of the line.

If you draw a line which starting point is (0,0) and the end point is (250,150), use the stroke method to draw the line.

Example:

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

var c = document.getElementById("ourCanvasLine");

var cctx = c.getContext("2d");

ctx.moveTo(0,0);

ctx.lineTo(250,150);

ctx.stroke();

</script>

The Rendering Context:

Example:

var canvas = document.getElementById("mycanvas");

if (canvas.getContext) {

var ctx = canvas.getContext('2d');

// drawing code here

} else {

// canvas-unsupported code here

}

Applying Styles and Colors on Stroke:

Applying Styles and Colors on Stroke The default color is black and its thickness is one pixel. But, you can set the color and width of the stroke using the stroke Style and lineWidth property respectively. The example will draw an orange color line having 5 pixels width.

Example:

window.onload = function() {

var canvas = document.getElementById("ourCanvas");

var context = canvas.getContext("2d");

context.lineWidth = 5;

context.strokeStyle = "orange";

context.moveTo(50, 150);

context.lineTo(250, 50);

context.stroke();

};

</script>

Supporting Browsers:

The latest versions of Firefox, Safari, Chrome support for HTML5 Canvas but IE8 does not support canvas natively.

You Are Here

HTML Canvas

Create HTML Canvas:

Example:

Understanding Canvas Coordinates:

If you want to draw a circle on the canvas, you can use the arc() method:

Example:

use one of the ink() methods, like stroke() or fill():

Example:

Draw Line on Canvas:

Example:

The Rendering Context:

Example:

Applying Styles and Colors on Stroke:

Example:

Supporting Browsers:

Ask a Question Cancel reply