Canvas Examples – Add Text | Add Image | Resize Image | Change Canvas Color

How to add text to Canvas?

For add text we can do that using fillText(‘text’, x, y) or strokeText(“text”, x, y) method. The text is rendered using the current stroke or fill style, which can be a color, gradient, or pattern. You can specify a number of text settings, such as the font family, size, and weight, and the text alignment and baseline.

 

The textBaseline attribute’s keywords which correspond to the alignment points in the font, where:

  • top corresponds to the top of the em square
  • hanging is the hanging baseline
  • middle is the middle of the em square
  • alphabetic is the alphabetic baseline
  • ideographic is the ideographic baseline
  • bottom corresponds to the bottom of the em square

 

Here is example for add text with gradient, font family, size, weight, shadow.

canvas = document.getElementById(‘myCanvas’);

context = canvas.getContext(‘2d’);

context.font=”italic 30px Georgia”;

context.strokeStyle = “rgba(237,229,0,1)”;

context.shadowOffsetX = 2;

context.shadowOffsetY = 2;

context.shadowBlur = 1;

context.shadowColor = “rgba(0,0,0,1)”;

var gradient = context.createLinearGradient(200,70,200,110);

gradient.addColorStop(0, “#f55b5b”);

gradient.addColorStop(1, “#3112a3”);

context.fillStyle = gradient;

context.fillText(“Hello World”, x, y);

 

How to add image to Canvas?

 

To draw an image using HTML5 Canvas, we can use the drawImage() method which requires an image object and a destination point. The destination point is relative to the top left corner of the image.

 

The drawImage function includes three parameters and is expressed in the form drawImage(object image, float x, float y). The image file formats supported within the canvas element and drawImage function are .jpg, .gif, and .png.

 

The drawImage() method requires an image object, we must first create an image and wait for it to load before instantiating drawImage(). We can do this by using the onload property of the image object.

 

Here is example for add image to Canvas.

canvas = document.getElementById(‘myCanvas’);

context = canvas.getContext(‘2d’);

var imgObj = new Image();

imgObj.onload = function() {

context.drawImage(imgObj, 10, 10);

}

imgObj.src = “image/nature.jpg”;

 

How to resize image?

Now we have drawImage() method for draw image on Canvas, for resize image we can use same method with optional height and width parameters and is expressed in the form drawImage(object image, float x, float y, [optional width], [optional height]).

 

Here is example for add and resize image to Canvas.

canvas = document.getElementById(‘myCanvas’);

context = canvas.getContext(‘2d’);

var imgObj = new Image();

imgObj.onload = function() {

context.drawImage(imgObj, 10, 10, 200, 100);

}

imgObj.src = “image/nature.jpg”;

 

 

Canvas Examples – Draw Line | Rectangle | Circle | Undo

Canvas Examples – Draw Line | Rectangle | Circle | Undo

What is Canvas?

Canvas is an HTML5 element which can be used to draw graphics using scripting (usually JavaScript).

We’ll need to place the canvas tag somewhere inside the HTML document, access the canvas tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations. Canvas has several methods for drawing paths, boxes, circles, characters, and adding images.

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support the canvas element.

 

Add Canvas to HTML

A canvas is a rectangular area on an HTML page, and it is specified with the canvas element.

<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

 

Draw Line to Canvas

To draw a line using HTML5 Canvas, we can use the beginPath(), moveTo(), lineTo(), and stroke() methods.

First, we can use the beginPath() method to declare that we are about to draw a new path. Next, we can use the moveTo() method to position the context point (i.e. drawing cursor), and then use the lineTo() method to draw a straight line from the starting position to a new position. Finally, to make the line visible, we can apply a stroke to the line using stroke().

 

Example for line draw

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

var context=canvas.getContext(“2d”);

context.beginPath();

context.moveTo(x, y);

context.lineTo(x, y);

context.stroke();

Draw Rectangle On Canvas

To create a rectangle using HTML5 Canvas, we can use rect(x,y,w,h) method, and for rectangle visible use stroke() method.

The rect() method have four parameter ie “x, y, width, height”, x is the upper left x co-ordinate, y is the upper left y co-ordinate of rectangle, then width of rectangle and height of rectangle.

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

var context=canvas.getContext(“2d”);

context.rect(x, y, w, h);

context.stroke();

 

strokeRect(x,y,w,h) and fillRect(x,y,w,h) also use for draw rectangle, strokeRect() method done same as rect() and stroke() method. And fillRect() method use to draw rectangle with fill color. If you are not use fillStyle property then fillRect method draw rectangle with default black color.

 

context.fillStyle= “#ff00ff”;

context.fillRect(x, y, w, h);

OR

context.fillStyle= “rgb(255, 0, 255)”;

context.fillRect(x, y, w, h);

Also we can clear the canvas with clearRect(x,y,w,h) method.

context.clearRect(0, 0, canvas.width, canvas.height);
Draw Circle On Canvas

To draw a circle with HTML5 Canvas, we can use arc() method. and for circle visible use stroke() method.

Arcs are defined by a center point ie (x,y), a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise, true for clockwise and false for anticlockwise, default is true;).

 

For draw full arc we can use starting angle is 0 and ending angle is 2* PI.

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

var context=canvas.getContext(“2d”);

context.beginPath();

context.arc(x, y, r, 0, 2*Math.PI);

context.stroke();

 

We can styled circle with fillStyle, strokeStyle and lineWidth properties.

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

var context=canvas.getContext(“2d”);

context.beginPath();

context.arc(x, y, r, 0, 2*Math.PI);

context.fillStyle = ‘#DA2C35’;

context.fill();

context.lineWidth = 3;

context.strokeStyle = ‘#003300’;

context.stroke();

Undo

There is not much we have to do add undo functionality to a Canvas application. We can achieve that by saving the state after each event in an array. These are simple JavaScript arrays where we are storing the images using push() and pop() methods. The canvas image is retrieved using the context.toDataURL(“image/png”) method and when we undo. we take that image and paint it again on the canvas after clearing the current canvas.

 

Saving Canvas state.

var restorePoints = [];

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

var context=canvas.getContext(“2d”);

var imgSrc = canvas.toDataURL(“image/png”);

restorePoints.push(imgSrc);

 

Repaint Canvas

var oImg = new Image();

oImg.onload = function() {

var canvas = document.getElementById(“myCanvas”);
var canvasContext = canvas.getContext(“2d”);
canvasContext.clearRect(0, 0, canvas.width, canvas.height);
canvasContext.drawImage(oImg, 0, 0);
}

oImg.src = restorePoints.pop();