How to create image data in Canvas using JavaScript?

To create a image data object in Canvas, we can use  createImageData(width, height) method. This creates a new blank transparent black image data object in Canvas. For every pixel in this image object ,there are four pieces of information needed to customize them.

R – Red (0 – 255)

G – Green (0 – 255)

B – Blue(0 – 255)

A – Alpha (0/Transparent – 255/Fully visible)

The colour/transparency information is stored in an array. The array can be accessed from data  property of the image data object. We can manipulate the colour information and then place the image object again in canvas using the  putImageData() method.

HTML

JS

OUTPUT

 

How to draw Image in HTML Canvas?

We can draw images inside canvas  by using the  drawImage('someImage' , x, y)  method. It takes image source stored in a variable as input along with co-ordinates for painting the image.

HTML

 

JS

 

OUTPUT

How to draw Text in HTML Canvas?

In order to draw a text, we can make use of the following methods and properties. font property is used to set the size of text along with the text style.  fillText('someText',x,y)  method draws filled text on the canvas. x,y denotes the coordinates for text to be drawn.

HTML

JS

 

OUTPUT

 

How to use gradient in HTML Canvas?

Gradients are used to perform smooth colour transitions using two or more colours. In Canvas we can use two types of gradients: linear and radial.

Linear Gradient

createLinearGradient(x,y,x1,y1) creates linear gradient in Canvas that paints along the line represented in the arguments. In addition we have to specify two colour stops using  addColorStop() ,which specifies the colour and its position along the gradient. To use the gradient, we have to set the  fillStyle  or  strokeStyle  property to gradient and draw the canvas.

Radial Gradient

createRadialGradient(x,y,r,x1,y1,r1)  creates radial gradient in Canvas that paints along the cone represented by circles in the arguments.

HTML

 

JS 

Output

Radial Gradient in Canvas

Linear Gradient in Canvas

How to draw a circle in Canvas?

We can draw a circle in Canvas using the  arc(x,y,r,startAngle,endAngle,counterClockwise)  method. The arc method is used to create curves or circles using the startAngle and endAngle values.The beginPath()  method begins the path or resets the current path. The arc method draws a circle with a center point specified by x, y and radius r. The start angle denotes the angle from which we have to start drawing the arc and the end angle denotes the angle till which we continue drawing the arc. For a circle, the startAngle can be at 0° and endAngle at 360°. In terms of radians, startAngle is given by 0*Math.PI and endAngle is given by 2*Math.PI. The stroke() method is used to actually draw the path on the canvas. The counterClockwise denotes whether the path should be drawn  in clockwise or anticlockwise direction.By default, it is set to false indicating that the path must be drawn in clockwise direction.

 

 

 

 

How to draw a line in Canvas?

In order to draw a line in Canvas, we have to use  moveTo(x,y) and  lineTo(x,y)  methods from  getContext('2d') . The moveTo(x,y) denotes the starting point for drawing the line and lineTo denotes the ending point for the line. We draw the line by using  stroke() method.

 

 

How to perform Canvas drawing using Javascript?

We can draw objects, text and perform animations in Canvas using Javascript. We can use the  id  attribute of the canvas element to reference it in script file. We can make use of HTML DOM method:  document.getElementById('someId')  to access the canvas element and perform our drawing. As canvas element is just a container, in order to draw something in it we have to create a drawing object. This is done by  getContext('2d')  object. This is a built-in html object that helps us to draw objects within canvas by using its methods and properties.

Following code snippet creates a simple canvas drawing using javascript.

The  fillRect(x,y,width,height) method draws a rectangle from a point x and y with a specified by width and height . By default, the canvas is filled with black colour. In order to change it, we have to use the  fillStyle  property and change the default black colour.