Canvas

Canvas
Nikhil
Published on 2021-07-02 05:40:21

Learn about the canvas in HTML and also example of canvas

Attribute Description
height Specifies the canvas height
width Specifies the canvas width

Basic Example of canvas


The canvas element was introduced in HTML5 for drawing graphics.

<canvas id="myCanvas">
Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>


The above will create a transparent HTML<canvas> element of 300×150 px in size. 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:

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 = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y

 

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 = 'red'; // #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 = 'green';
            // #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>

 

ATutorialHub Related Guide

HTML Tutorials Comments (8)

Leave a Comment

Your email address will not be published. Required fields are marked*

User Comments

html tutorial comments

panduranga gupta

2021-07-05 07:03:13

good website for learning and help me a lot

html tutorial comments

raju

2021-09-25 14:58:47

The awsome website i am looking like for a long time, good work atutorialhub team keep doing

html tutorial comments

Shivani

2021-09-01 15:03:56

Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience

html tutorial comments

Harshitha

2021-09-10 15:05:45

It is very helpful to students and easy to learn the concepts

html tutorial comments

Sowmya

2021-09-14 15:06:41

Great job Tutorials are easy to understand Please make use of it

html tutorial comments

Zain Khan

2021-09-18 15:07:23

Great content and customized courses.

html tutorial comments

Rudrakshi Bhatt

2021-09-09 15:08:10

Well structured coursed and explained really well!

html tutorial comments

Pavana Somashekar

2021-09-11 15:09:08

Good platform for beginners and learn a lot on this website