Category: 6. Canvas Tutorial

The HTML5 <canvas> element is used for drawing graphics via scripting (commonly JavaScript). But the <canvas> element does not have drawing opportunities on its own. To draw the graphics, you must use a script because the <canvas> element is only a container for graphics. The getContext() method returns an object which presents properties and methods for drawing on…

One of the features of the <canvas> element is the possibility of using images. These can be used for different purposes. You can use external images in any format supported by the browser (e.g., PNG, GIF, or JPEG). As a source, you can also use the image created by other canvas elements. Importing images into…

HTML5 canvas allows creating text using different font and text properties presented below: Properties and Methods Property Description font It returns the current font settings and can be set to change the font. textAlign It returns the current text alignment settings and can be set to change the alignment. The property has the following values:…

A gradient, in general, is a pattern of colors that changes from one color to another. HTML5 Canvas gradients are patterns of color used to fill circles, rectangles, lines, text, and so on, and the canvas shapes aren’t limited to solid colors. There are two types of gradients: createLinearGradient(x,y,x1,y1) – for creating a linear gradient createRadialGradient(x,y,r,x1,y1,r1) –…

The HTML canvas is considered to be a two-dimensional grid, the upper-left corner of which has the coordinates (0,0). Drawing a Line The methods below are used to draw a straight line on a canvas: moveTo(x,y), which specifies the starting point of the line lineTo(x,y), which specifies the ending point of the line Use one…

The JavaScript should be used to draw on the canvas. We are going to do with step by step. 1. Find the Canvas Element To find the canvas element use the HTML DOM method: getElementById(): 2. Create a drawing object Use the getContext() HTML object, with properties and methods: 3. Draw on the Canvas Element…

The HTML <canvas> element is used for drawing graphics via scripting. It is only a container for graphics. You need JavaScript to draw the graphics. Canvas has multiple methods for drawing paths, circles, boxes, text, as well as for adding images. Canvas can be used to draw colorful texts, with or without animation. Besides, they can be…