@coder 795
HTML5 Canvas
2021-11-17 12:15 · 4 min read
What is HTML Canvas?
HTML <canvas> element was introduced in HTML5 for drawing graphics.You can use the canvas element to draw amazing stuff like shapes, graphs, manipulate images, create engaging games, etc. with JavaScript.
Basic of Canvas
The available attributes are as follows:
| Attribute | Description |
|---|---|
| width | Specifies the canvas width |
| height | Specifies the canvas height |
Examples of canvas
You can use the canvas element to draw amazing stuff like shapes, graphs, manipulate images, create engaging games, etc. with JavaScript. The canvas's 2D drawable layer surface Object is referred to as CanvasRenderingContext2D; or from a HTMLCanvasElement using the .getContext("2d") method:
<canvas id="myCanvas">
Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>
<script>
var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height
ctx.fillStyle = "#fff";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y
</script>The above code creates a transparent HTML <canvas> element of 300×150 px in size. :
Drawing two rectangles on a <canvas>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw two rectangles on the canvas</title>
<style>
canvas {
border: 1px solid gray;
}
</style>
<script async>
window.onload = init; // call init() once the window is completely loaded
function init() {
// #1 - get reference to <canvas> element
var canvas = document.querySelector('canvas');
// #2 - get reference to the drawing context and drawing API
var ctx = canvas.getContext('2d');
// #3 - all fill operations are now in red
ctx.fillStyle = '#F44336';
// #4 - fill a 100x100 rectangle at x=0,y=0
ctx.fillRect(0, 0, 100, 100);
// #5 - all fill operations are now in green
ctx.fillStyle = 'white';
// #6 - fill a 50x50 rectangle at x=25,y=25
ctx.fillRect(25, 25, 50, 50);
}
</script>
</head>
<body>
<canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>
</html>
Note: Advance canvas tutorials are coming soon ...
- Animating Canvas using javascript
- Intracting with Canvas with User Action
- Intracting with Canvas with User Action and design a game
TAGS:
POPULAR POSTS
what is new in miui 11?...
best free web hosting services...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
CSS3 RESPONSIVE UI...
Tables HTML...
How to host a web page in 10 minutes....
How to use CSS3 Overflow Property?...
CSS3 FUNCTIONS...
CSS3 FILTERS...
CSS3 SHAPES...
RECENT COMMENTS
2022-03-05 11:05
By coder
on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke
on do you want to make money online?
2021-10-12 12:34
By abnongoke
on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed
on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed
on best free web hosting services
2021-10-12 12:34
By amos tanui
on free website ssl security using cloudflare
