JS Graphics
In this page:
What JavaScript Graphics Can Do
Beyond styling existing HTML elements, JavaScript graphics tools let you draw completely custom visuals -- charts, game sprites, data visualizations, generated patterns -- directly onto a drawing surface, pixel by pixel, under full programmatic control.
Note: Reach for graphics tools specifically when you need custom, dynamic, or data-driven visuals that plain HTML and CSS cannot easily produce.
Warning: Building complex custom graphics from scratch is significantly more work than styling HTML elements -- reserve it for visuals that genuinely need that level of control.
Example: What JavaScript Graphics Can Do
<canvas id="chart" width="200" height="100"></canvas>
<script>
const ctx = document.getElementById("chart").getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 50, 50); // pixel-level drawing, not just styled HTML
</script>The Canvas Element as a Drawing Surface
A <canvas> element is essentially a blank rectangular area in the page with no visual content of its own -- it becomes useful only once JavaScript retrieves its drawing context and starts issuing drawing commands against it.
Note: Always set explicit width and height attributes on the canvas element itself, since CSS-only sizing can distort the coordinate system used for drawing.
Warning: A canvas with no JavaScript drawing to it renders as a completely blank, invisible rectangle -- easy to mistake for a bug when it is simply empty.
Example: The Canvas Element as a Drawing Surface
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
const canvas = document.getElementById("myCanvas"); // blank until drawn on
const ctx = canvas.getContext("2d");
ctx.fillRect(20, 20, 100, 50);
</script>Rendering Data Visually
Beyond static shapes, canvas is commonly used to render data-driven visuals -- bar charts built from an array of values, simple line graphs plotting trends over time -- computing pixel positions from the underlying data each time it changes.
Note: Separate your data (plain JavaScript values) from your drawing code, recalculating pixel positions from the data whenever it updates, rather than hardcoding pixel coordinates.
Warning: Manually computing chart coordinates and scaling for anything beyond a very simple visualization gets complex quickly -- this is exactly the kind of work a charting library exists to handle.
Example: Rendering Data Visually
<canvas id="chart" width="200" height="100"></canvas>
<script>
const data = [30, 80, 45, 60];
const ctx = document.getElementById("chart").getContext("2d");
data.forEach((value, i) => ctx.fillRect(i * 40, 100 - value, 30, value));
</script>Hand-Rolled Drawing vs Using a Library
Writing raw Canvas API calls for a simple shape or a one-off visualization is reasonable, but for common chart types (bar, line, pie, scatter) with axes, labels, legends, tooltips, and animations, a library like Chart.js handles an enormous amount of complexity you would otherwise have to build yourself.
Note: Prototype quickly with raw canvas for a very simple or highly custom visual; reach for Chart.js the moment you need standard chart features like axes, legends, or tooltips.
Warning: Reinventing standard charting features (axis labels, legends, responsive resizing) that a mature library already solves is a common source of wasted effort on custom dashboards.
Example: Hand-Rolled Drawing vs Using a Library
<canvas id="c1" width="100" height="100"></canvas>
<script>
document.getElementById("c1").getContext("2d").fillRect(10, 10, 50, 50);
</script>
<!-- For real charts with axes/legends/tooltips, use a library like Chart.js instead -->Choosing Between Canvas and Other Graphics Approaches
Canvas is best suited for pixel-based, frequently redrawn, or animated graphics (games, live data visualizations); SVG is often a better fit for graphics that need to stay resolution-independent and individually interactive, since SVG shapes remain real, selectable DOM elements unlike canvas pixels.
Note: Choose canvas for high-frequency redraws (animations, games) and SVG for graphics needing crisp scaling or individual shape interactivity.
Warning: A canvas-based graphic scales as a bitmap image would, becoming blurry when stretched larger, unlike SVG which remains sharp at any size.
Example: Choosing Between Canvas and Other Graphics Approaches
<canvas id="pixels" width="50" height="50"></canvas>
<svg width="50" height="50"><circle cx="25" cy="25" r="20" fill="green"/></svg>- Assuming CSS alone can draw arbitrary shapes and animations the way canvas can -- CSS handles styling existing elements, not free-form pixel drawing.
- Forgetting that everything drawn on a canvas is just pixels, with no memory of individual shapes -- you cannot later select or move 'the circle you drew earlier' the way you could a DOM element.
- Choosing to hand-roll complex chart rendering with raw Canvas API calls when a well-tested library like Chart.js would save significant time and handle edge cases already.
- The Canvas API provides a JavaScript-controlled drawing surface for shapes, images, text, and animations.
- Canvas drawings are pixel-based, not object-based -- once drawn, individual shapes cannot be independently selected or moved without redrawing.
- Chart.js and similar libraries build on top of canvas to handle common chart types without needing to hand-write low-level drawing code.
The Canvas API is supported in every modern browser; Chart.js works anywhere canvas does, since it renders through canvas internally.
Chapter Quiz — Complete all 8 topics to unlock
0/8 topics done
Complete these topics first: