Skip to Main Content
Learn Chart.js
book

Learn Chart.js

by Helder da Rocha
February 2019
Beginner to intermediate content levelBeginner to intermediate
284 pages
6h 20m
English
Packt Publishing
Content preview from Learn Chart.js

HTML5 Canvas

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}); ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Start your free trial

You might also like

Pro D3.js: Use D3.js to Create Maintainable, Modular, and Testable Charts

Pro D3.js: Use D3.js to Create Maintainable, Modular, and Testable Charts

Marcos Iglesias

Publisher Resources

ISBN: 9781789342482OtherErrata PagePurchase Link