HTML Canvas

The canvas element is used to draw graphics on a web page via JavaScript. It can be used for rendering graphs, game graphics, or any visual images dynamically.

Canvas Element Attributes

The canvas element has two main attributes to define its size:

Attribute Description Example
width Specifies the width of the canvas in pixels.
Try yourself 
        
            <canvas width="500" height="500" style="border:1px solid #000000;"></canvas>
height Specifies the height of the canvas in pixels.
Try yourself 
        
            <canvas width="500" height="500" style="border:1px solid #000000;"></canvas>

Drawing on Canvas

To draw on a canvas, you must first get a reference to the canvas element and then access its drawing context. The most common context is "2d".

Example: Basic Canvas Setup
Try yourself 
        
            <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 75);
</script>

This example shows how to set up a basic canvas element and draw a simple rectangle on it using JavaScript.

Example: Drawing Shapes
Try yourself 
        
            <canvas id="shapesCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
<script>
    var c = document.getElementById("shapesCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(20, 20, 150, 100);
    ctx.beginPath();
    ctx.arc(200, 50, 40, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.moveTo(250, 50);
    ctx.lineTo(300, 100);
    ctx.stroke();
</script>

This example demonstrates drawing various shapes such as rectangles, circles, and lines on the canvas.

Drawing Text

You can also draw text on the canvas using the fillText() and strokeText() methods.

Example: Drawing Text
Try yourself 
        
            <canvas id="textCanvas" width="400" height="100" style="border:1px solid #000000;"></canvas>
<script>
    var c = document.getElementById("textCanvas");
    var ctx = c.getContext("2d");
    ctx.font = "30px Arial";
    ctx.fillText("Hello World", 10, 50);
    ctx.strokeText("Hello World", 10, 80);
</script>

This example shows how to draw filled and stroked text on the canvas.

Working with Images

The drawImage() method can be used to draw images onto the canvas.

Example: Drawing Images
Try yourself 
        
            <canvas id="imageCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
<script>
    var c = document.getElementById("imageCanvas");
    var ctx = c.getContext("2d");
    var img = new Image();
    img.onload = function() {
        ctx.drawImage(img, 0, 0);
    };
    img.src = "/images/common/cutecat.png";
</script>

This example demonstrates how to draw an image on the canvas.

Handling Canvas Transformations

The canvas API allows you to perform transformations such as translation, rotation, and scaling.

Example: Canvas Transformations
Try yourself 
        
            <canvas id="transformCanvas" width="400" height="200" style="border:1px solid #000000;"></canvas>
<script>
    var c = document.getElementById("transformCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(0, 0, 150, 100);
    ctx.translate(200, 50);
    ctx.rotate((Math.PI / 180) * 25);
    ctx.scale(0.5, 0.5);
    ctx.fillStyle = "#0000FF";
    ctx.fillRect(0, 0, 150, 100);
</script>

This example shows how to translate, rotate, and scale elements on the canvas.

Important Notes

Here are some important notes and best practices for using the canvas element: