HTML Canvas
On a web page, visuals are created using the HTML <canvas> element.
Using <canvas>, the image on the left was produced. Four items are displayed: a multicolored rectangle, a red rectangle, a gradient rectangle, and a multicolored text.
What is HTML Canvas?
JavaScript is used to create graphics on the fly using the HTML <canvas> element.
All that the <canvas> element does is hold visuals. The visuals are actually drawn using JavaScript.
There are multiple ways to create pathways, boxes, circles, text, and images on canvas.
All of the main browsers support Canvas.
Canvas Examples
An HTML page’s rectangular canvas is its surface. A canvas has no boundary and no content by default.
The markup appears as follows:
<canvas id="myCanvas" width="200" height="100"></canvas>
Remember to always provide the width and height attributes to determine the canvas’s dimensions, along with the id attribute (to be referenced in a script). The style attribute can be used to add a border.
Here’s an illustration of a simple blank canvas:
Example
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">
</canvas>
Add a JavaScript
Once the rectangular canvas area has been created, JavaScript needs to be added in order to draw.
Here are a few instances:
Draw a Line
Example
<canvas id="myCanvas2" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the canvas element
</canvas>
Draw a Circle
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
Draw a Text
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Stroke Text
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
Draw Linear Gradient
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0, 0, 200, 0);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Draw Circular Gradient
Example
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
Draw Image
HTML canvas
canvas element
canvas graphics
JavaScript canvas
canvas drawing
canvas examples
canvas line
canvas circle
canvas text
canvas gradient
canvas image
HTML canvas tutorial
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
The HTML canvas element is a powerful feature introduced in HTML5 that allows you to create dynamic, scriptable graphics within a web page. The canvas element provides a drawing surface where you can use JavaScript to render 2D shapes, images, and animations.
One of the primary uses of the HTML canvas is to create interactive visualizations, games, and data-driven graphics. The canvas element gives you full control over the pixels on the screen, enabling you to draw shapes, lines, text, and even import and manipulate images.
To use the canvas element, you first need to add it to your HTML document using the “ tag. You can then use JavaScript to access the canvas context and begin drawing. The canvas provides a wide range of methods and properties for creating shapes, applying colors and gradients, handling user input, and animating the content.
Some common use cases for the HTML canvas include:
– Creating interactive charts and graphs
– Building browser-based games
– Generating dynamic visualizations and infographics
– Implementing image manipulation and filters
– Rendering real-time data visualizations
By mastering the HTML canvas, you can unlock a world of creative possibilities and enhance the interactivity and visual appeal of your web pages. Whether you’re a web developer, designer, or data visualization enthusiast, the canvas element is a valuable tool to have in your arsenal.
