There is no way to draw circles or gradients using HTML tags, but you can use HTML Canvas: a full-featured JavaScript graphics API for 2D vector graphics. You can draw anything you wish with Canvas, and since it's JavaScript, you can make it animate and respond to events.
To draw using Canvas, you need to create a <canvas> element in your page. You can do that using plain HTML:
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
You can also create it dynamically, using HTML DOM:
const canvas = document.createElement("canvas");
canvas.setAttribute("width", 300);
canvas.setAttribute("height", 300);
document.body.appendChild(canvas);
You can create it using JQuery too:
const canvas = $("<canvas/>",{id: "canvas"}).prop({width:300,height:300});
Then you can reference using the DOM:
const canvas = document.getElementById("canvas");
const canvas = $("#canvas");
Or you can reference using JQuery:
const canvas = document.getElementById("canvas");
const canvas = $("#canvas");
Once you have a canvas object, you obtain a 2D graphics context and can start drawing:
const ctx = canvas.getContext("2d");
Practically, all the Canvas API consists of is methods and properties called from the graphics context. Before drawing, you set properties such as font, fill color, and stroke color:
ctx.fillStyle = "red";
ctx.strokeStyle = "rgba(255,127,0,0.7)";
ctx.lineWidth = 10;
And then fill or stroke rectangles and arbitrary paths containing lines and curves. These commands will draw a red 50 x 50 pixel square with a 10 pixel wide yellow semi-transparent border at position 50,50:
ctx.fillRect(50,50,50,50);
ctx.strokeRect(50,50,50,50);
You can draw other shapes, texts, and images on the same canvas. The context properties will not change unless they are redefined.
You can also draw using path commands. You need to start the path with ctx.beginPath(), and call a sequence of commands that moves to points and draws lines and curves, and when you are done you can close the path (if it's a closed path) and call fill() and/or stroke() to draw it using the current styles.
The following code draws some shapes, paths, shadows, gradients, and text:
ctx.strokeStyle = "blue";
ctx.lineWidth = 2;
ctx.shadowBlur = 10;
ctx.shadowColor = "green";
ctx.shadowOffsetX = ctx.shadowOffsetY = 5;
ctx.setLineDash([5,2,1,2]);
ctx.beginPath();
ctx.moveTo(150,200);
ctx.lineTo(150,150);
ctx.lineTo(100,150);
ctx.bezierCurveTo(100,200,150,250,200,250);
ctx.lineTo(200,200);
ctx.closePath();
ctx.stroke();
const text = "Canvas";
ctx.font = "24px monospace";
const textWidth = ctx.measureText(text).width;
const gradient = ctx.createLinearGradient(200,100,200 + textWidth,100);
gradient.addColorStop(0,"magenta");
gradient.addColorStop(1, "yellow");
ctx.fillStyle = gradient;
ctx.shadowColor = "transparent";
ctx.fillText("Canvas", 200, 100);
ctx.setLineDash([0]);
ctx.strokeStyle = "gray";
ctx.beginPath();
ctx.moveTo(50,200);
ctx.lineTo(50,250);
ctx.lineTo(100,250);
ctx.arcTo(100,200,50,200,50);
ctx.stroke();
ctx.beginPath();
ctx.arc(275,150,50,1.57,3.14,false);
ctx.lineTo(275,150);
ctx.fill();
ctx.globalAlpha = 0.75;
ctx.beginPath();
ctx.arc(175,75,40,0,6.28,false);
ctx.clip();
const image = new Image(100,100);
image.onload = function() {
ctx.drawImage(this, 125, 25, this.width, this.height);
}
image.src = "pluto.jpg";
The following diagram shows the result. You can try and run the full code, which is available in Examples/example-8-canvas.html:
Some essential Canvas commands are listed in the following table. All commands are methods of the current Canvas context:
|
Method or property |
Description |
|
fillStyle |
Sets the color to be used in the fill() commands. |
|
strokeStyle |
Sets the color to be used in the stroke() commands. |
|
lineWidth |
Sets the line width to be used in the stroke() commands. |
|
lineCap |
Sets the style of the line caps, for example butt (default), round, or square. |
|
lineJoin |
Sets the style of the line joins, for example ‘round', ‘bevel', or ‘miter' (default). |
|
font |
Sets the font to be used in the strokeText() or fillText() commands. |
|
globalAlpha |
Sets the global opacity (0 = transparent, 1 = opaque) for the context. |
|
shadowBlur, shadowColor, |
Sets shadow properties. The default color is transparent black. The default numeric values are zero. |
|
fillRect(x,y,w,h) |
Fills a rectangle. |
|
strokeRect(x,y,w,h) |
Draws a border around a rectangle. |
|
setLineDash(dasharray) |
Receives an array for the dash, alternating lines and spaces. |
|
fillText(text,x,y); |
Fills text at the x and y positions (y is the baseline). |
|
strokeText(text, x, y); |
Draws a border around text at the x and y positions. |
|
createLinearGradient(x0, y0, x1, y1) |
Creates a linear gradient perpendicular to the line. Radial gradients and patterns are also supported. |
|
drawImage(image, x, y, w, h) |
Draws an image. |
|
beginPath() |
Starts a path. |
|
moveTo(x, y) |
Moves the cursor to a position in the path. |
|
lineTo(x, y) |
Moves the cursor to a position in the path, drawing a line along the way. |
|
bezierCurveTo(c1x, c1y, c2x, c2y, x, y), quadraticCurveTo(cx, cy, x, y) |
Draws curves with one (quadratic) or two (Bezier) control points in a path. |
|
arc(x, y, r, sa, ea) |
Draws an arc by specifying the center, radius, start, and end angles in a path. |
|
arcTo(sx, sy, r, ex, ey) |
Draws an arc by specifying the coordinates of the starting point, the radius, and the coordinates of the end point. |
|
rect(x, y, w, h) |
Draws a rectangle in a path with the coordinates of the top-left corner, width, and height. |
|
clip() |
Creates a clipping region with the shapes drawn by the path that will affect objects that are drawn afterwards. |
|
fill() |
Fills a path with the current color. |
|
stroke() |
Strokes the path with the current color. |