HTML5 Canvas

Note: Labels often need to specify an id property (frequently referenced in scripts), the width, and height properties define the size of the canvas.

Tip: You can use multiple elements in HTML pages.

Use the style property to add a border:

Try it out . . .

Use JavaScript to draw images

The canvas element itself is not drawing. All drawing must be done within JavaScript:

Try it out . . .

Instance resolution:

First, find the element of the .lt;canvas:

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

Then, create the context object:

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

The getContext ("2d") object is a built-in HTML5 object with multiple ways to draw paths, rectangles, circles, characters, and add images.

The following two lines of code draw a red rectangle:

ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);

Setting fillStyle properties can be CSS color, gradient, or pattern. The default setting for fillStyle is .000000 (black).

The fillRect (x,y, width, height) method defines how the rectangle is currently filled.

Canvas coordinates

Canvas is a two-dimensional grid.

The upper-left coordinates of canvas are (0,0)

The fillRect method above has parameters (0,0,150,75).

To draw a 150x75 rectangle on the canvas, starting in the upper left corner (0,0).

The coordinate instance

As shown in the following image, the X and Y coordinates of the canvas are used to position the painting on the canvas.

HTML5 Canvas

Canvas - Path

To draw a line on Canvas, we'll use two methods:

MoveTo (x,y) defines the line start coordinates
LineTo (x,y) defines the line end coordinates

To draw lines we have to use the "ink" method, just likestroke().

Define the start coordinates (0,0), and the end coordinates (200,100). Then use the stroke() method to draw the line:

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();

Try it out . . .

To draw a circle in canvas, we'll use the following method:

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

We actually use the "ink" method when drawing circles, such as stroke() or fill().

Draw a circle using the arc() method:

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

Try it out . . .

Canvas - Text

Drawing text with canvas, important properties and methods are as follows:

font - Define the font
fillText (text, x, y) - Draw solid text on canvas
StrokeText (text, x, y) - Draw hollow text on canvas

Using fillText():

Draw a high 30px text (solid) on the canvas using the "Arial" font:

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);

Try it out . . .

Using strokeText():

Draw a high 30px text (hollow) on the canvas using the "Arial" font:

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.strokeText("Hello World",10,50);

Try it out . . .

Canvas - Gradient

Gradients can be filled in rectangles, circles, lines, text, etc., and various shapes can define different colors themselves.

There are two different ways to set up the Canvas gradient:

CreateLinearGradient (x, y, x1, y1) - Create a line gradient
CreateRadialGradient (x, y, r, x1, y1, r1) - create a radial/circular gradient

When we use gradient objects, we must use two or more stop colors.

The addColorStop() method specifies a color stop, and the parameters are described using coordinates, which can be 0 to 1.

Using a gradient, set the value of fillStyle orstrokeStyle to a gradient, and then draw shapes such as rectangles, text, or a line.

Using createLinearGradient():

Create a linear gradient. Fill the rectangle with a gradient:

Javascript:

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

// Create gradient
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Try it out . . .

Using createRadialGradient():

Create a radial/circular gradient. Fill the rectangle with a gradient:

Javascript:

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

// Create gradient
var grd=ctx.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");

// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(10,10,150,80);

Try it out . . .

Tip: The parameters in parentheses of context.createRadialGradient (x, y, r, x1, y1, r1) have the following meaning when creating radial gradients using the element:

x: Represents the x coordinates of the start circle of the gradient
y: Represents the y coordinates of the start circle of the gradient
r: Represents the radius of the start circle
x1: Represents the x coordinates of the end circle of the gradient
y1: Represents the y coordinates of the end circle of the gradient
r1: Represents the radius of the end circle

Canvas - image

Place an image on the canvas using the following method:

drawImage( image,x,y )

Using images:

HTML5 Canvas

Place an image on the canvas:

Javascript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,10,10);

Try it out . . .

HTML Canvas reference manual

The full properties of the label can be referred to the Canvas reference manual. .

The HTML Tag

Tag	describe
<canvas>	The Canvas element of HTML5 uses JavaScript to draw an image on the web page.

Read on

HTML DOM Reference Manual: HTML DOM Canvas Object

HTML5 Canvas

Table of contents

HTML5 Canvas

What is Canvas?

Browser support

Create a canvas

Use JavaScript to draw images

Canvas coordinates

Canvas - Path

Canvas - Text

Canvas - Gradient

Canvas - image

Using images:

HTML Canvas reference manual

The HTML Tag

Read on

Cookie Consent