HTML CANVAS

Maha



HTML Canvas 

The HTML <canvas> element is a versatile element used for drawing graphics on the fly via JavaScript. It provides a space in the browser where you can dynamically create graphics, such as charts, animations, or even game graphics.

Basic Usage

To use the <canvas> element, you need to define its width and height, and then use JavaScript to draw on it. The canvas element itself is just a container; drawing is handled through the Canvas API.

Syntax:

<canvas id="myCanvas" width="500" height="400"></canvas>


JavaScript Context

To draw on the canvas, you need to obtain the "context" of the canvas, which is an object that provides methods and properties for drawing.

Syntax:

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

Example 1: Drawing a Rectangle

This example demonstrates how to draw a simple rectangle on the canvas.


  <!DOCTYPE html>
  <html>
  <head>
    <title>Canvas Example</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="400" style="border:3px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        
        ctx.fillStyle = '#FF0000';
        ctx.fillRect(50, 50, 150, 100);
    </script>
  </body>
  </html>


Output:





Example 2: Drawing a Circle

This example shows how to draw a circle using the arc method.


  <!DOCTYPE html>
  <html>
  <head>
    <title>Canvas 
Circle Example</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

      
        ctx.beginPath(); 
        ctx.arc(250, 200, 100, 0, 2 * Math.PI);
        ctx.strokeStyle = '#00FF00'; 
        ctx.stroke(); 
        ctx.fillStyle = '#0000FF'; 
        ctx.fill(); 
    </script>
  </body>
  </html>


Output:





Example 3: Drawing Text

This example demonstrates how to draw text on the canvas.


  <!DOCTYPE html>
  <html>
  <head>
    <title>Canvas Text 
Example</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="400" style="border:1px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

     
        ctx.font = '30px Arial';
        ctx.fillStyle = '#FF00FF'; 
        ctx.fillText('Hello, Canvas!', 50, 100); 
    </script>
  </body>
  </html>


Output:





Example 4: Drawing a Gradient

This example shows how to create and use linear gradients.


  <!DOCTYPE html>
  <html>
  <head>
    <title>Canvas 
Gradient Example</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="400" style="border:2px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

      
        var gradient = ctx.createLinearGradient(0, 0, 500, 400);
        gradient.addColorStop(0, '#FF0000'); 
        gradient.addColorStop(1, '#0000FF');
       
        ctx.fillStyle = gradient;
        ctx.fillRect(0, 0, 500, 400);
    </script>
  </body>
  </html>


Output:




Example 5: Drawing an Image

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


  <!DOCTYPE html>
  <html>
  <head>
    <title>Canvas Image
 Example</title>
  </head>
  <body>
    <canvas id="myCanvas" width="500" height="400" style="border:2px solid #000000;"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        
        img.onload = function() {
            ctx.drawImage(img, 50, 50, 200, 150);
        };
        img.src = 'path_to_your_image.jpg'; 
    </script>
  </body>
  </html>


Output:







More topic in HTML

Our website uses cookies to enhance your experience. Learn More
Accept !

GocourseAI

close
send