Author: misamaliraza94
-
Canvas Gradients
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) –…
-
Canvas Coordinates
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…
-
Canvas Drawing
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…
-
Canvas Intro
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…