February 2019
Beginner to intermediate
284 pages
6h 20m
English
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}); ...