HTML Canvas Basics
The <canvas> tag in HTML is employed to create drawings and graphics directly within a web page.
The image on the left is made using the<canvas>element. It displays four things: a red rectangle, a fading color rectangle, a rectangle with multiple colors, and text with multiple colors.
What is HTML Canvas?
The <canvas> tag in HTML is employed with JavaScript to create graphics dynamically.
The <canvas>tag is like an empty space for graphics. To create graphics there, you need to use JavaScript.
The canvas has various methods to draw paths, shapes like boxes and circles, text, and insert images.
Canvas Examples
A canvas is like a rectangle on a webpage. It doesn't have borders or anything inside it by default.
The markup is like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Remember to include an id attribute (which is used in scripts) and width and height attributes to set the canvas size. If you want a border, use the style attribute.
Here is basic example of empty canvas:
Add a JavaScript
Once you've made the rectangular canvas area, you need to include JavaScript to handle the drawing process.
Here are some examples:
Draw a Line
Draw a Circle
Draw a Text
Stroke Text
Draw Linear Gradient
Draw Circular Gradient
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<script>
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);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<script>
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);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<p>Image to use:</p>
<img id="scream" src="/assets/files/canvas-1.jpg" alt="The canvas" width="220" height="277">
<p>Canvas to fill:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"> Your browser does not support the HTML canvas tag.</canvas>
<p>
<button onclick="myCanvas()">Try it</button>
</p>
<script>
function myCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 10, 10);
}
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery