2

Draw Canvas Image, Line & Circle With HTML & JavaScript

canvas draw image
HTML canvas draw image

HTML canvas draw image, draw an image on canvas javascript, draw image on canvas html, HTML5 canvas draw image, HTML5 canvas draw a line, HTML5 canvas draw a rectangle, HTML5 canvas draw a circle, HTML5 canvas draw text


Please see the above image. Let’s create this using CANVAS and its graphic design methods using JavaScript.



💡Canas is an HTML element that is used to draw or create shapes/graphics with JavaScript. We can create Lines, rectangles, Circles, Curves, Dotted Lines, etc. By Using Canvas we can draw Images as well. We can process on Image. Using the html element is very easy, but we need a basic understanding of HTML and JavaScript. The default size of the canvas is 300 pixels × 150 pixels (width × height). But custom sizes can be defined using the HTML height and width property.
In order to draw graphics on the canvas we use a JavaScript context object, which creates graphics on the fly.

Let’s create Canvas Graphics & Shapes With HTML & JavaScript. Here we are creating multiple elements.

  • Lines
  • Dash Lines
  • Rectangle
  • Rectangle inside Rectangle
  • Circle
  • Draw an Image inside a Rectangle
  • Draw Text


To Create a Canvas element we use <canvas> element with an “Id” property and width, height property. By using the Id property we can get the Context of Canvas.
<canvas id=”myCanvas” width=”1200″ height=”450″ style=”border:1px solid #d3d3d3;”></canvas>

 <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
</style>

<body>
    <canvas id="myCanvas" width="1200" height="450" style="border:1px solid #d3d3d3;"></canvas>

  <script>

    var c = document.getElementById("myCanvas"); 

    //Below is function to console current  Mouse Position
    function getMousePos(canvas, evt) {
      var rect = canvas.getBoundingClientRect();
      return {
        x: evt.clientX - rect.left,
        y: evt.clientY - rect.top
      };
    }

    // Console Log current Coordinate on Mouse Move
    c.addEventListener('mousemove', (evt) => {
      var mousePos = getMousePos(c, evt);
      console.log(mousePos.x + ',' + mousePos.y);
    })

    // Get Context reference of Canvas
    var ctx = c.getContext("2d");


    drawInnerElements();

    function drawInnerElements() {

      //big rect
      ctx.beginPath();
      ctx.fillStyle = 'rgba(237, 246, 250, 1)';
      ctx.fillRect(40, 0, 240, 450);

      //big rect
      ctx.beginPath();
      ctx.fillStyle = 'rgba(237, 246, 250, 1)';
      ctx.fillRect(440, 0, 150, 450);

      // First rect
      ctx.beginPath();
      ctx.fillStyle = 'black';
      ctx.fillRect(0, 130, 30, 80);

      // JS text
      ctx.beginPath();
      ctx.font = "12px Arial";
      ctx.fillStyle = 'rgba(255, 255, 255, 1)';
      ctx.fillText("JS", 9, 150);

      // inner small rect
      ctx.beginPath();
      ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
      ctx.fillStyle = 'green';
      ctx.rect(6, 182, 18, 18);
      ctx.stroke();
      ctx.fill();

      // A text
      ctx.beginPath();
      ctx.fillStyle = 'rgba(255, 255, 255, 1)';
      ctx.fillText("A", 12, 194);


      // test text
      ctx.beginPath();
      ctx.fillStyle = 'black';
      ctx.fillText("Test", 55, 121);

      // second rect
      ctx.fillStyle = "orange";
      ctx.fillRect(56, 130, 30, 80);

      // draw image
      var img = new Image;
      img.src = './star.png';
      img.onload = function () {
        ctx.drawImage(img, 62, 140); // inside second rect
        ctx.drawImage(img, 104, 140); // inside third rect
      };

      // inner small rect inside second rect
      ctx.beginPath();
      ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
      ctx.fillStyle = 'green';
      ctx.rect(62, 182, 18, 18);
      ctx.stroke();
      ctx.fill();

      // B text
      ctx.beginPath();
      ctx.fillStyle = 'rgba(255, 255, 255, 1)';
      ctx.fillText("B", 68, 194);

      // 3rd rect
      ctx.fillStyle = "rgba(192, 194, 199, 1)";
      ctx.fillRect(98, 130, 30, 80);

      // 4th rect
      ctx.fillStyle = "rgba(192, 194, 199, 1)";
      ctx.fillRect(148, 130, 30, 80);

      // inner small rect inside 4th rect
      ctx.beginPath();
      ctx.strokeStyle = 'white';
      ctx.strokeRect(155, 140, 15, 22);

      // 5th rect
      ctx.fillStyle = "orange";
      ctx.fillRect(232, 130, 30, 80);

      // inner small rect inside 5th rect to upside
      ctx.beginPath();
      ctx.strokeStyle = 'white';
      ctx.strokeRect(239, 140, 15, 22);


      // inner small rect inside 5th rect
      ctx.beginPath();
      ctx.strokeStyle = 'rgba(255, 255, 255, 1)';
      ctx.fillStyle = 'green';
      ctx.rect(237, 182, 18, 18);
      ctx.stroke();
      ctx.fill();

      // C text of 5th rect
      ctx.beginPath();
      ctx.fillStyle = 'rgba(255, 255, 255, 1)';
      ctx.fillText("C", 243, 194);



      //solid line
      ctx.beginPath();
      ctx.moveTo(0, 173);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "orange";
      ctx.lineTo(356, 172);
      ctx.stroke();


      // dashed line
      ctx.beginPath();
      ctx.strokeStyle = "orange";
      ctx.setLineDash([5, 5]);
      ctx.moveTo(356, 172);
      ctx.lineTo(600, 173);
      ctx.stroke();

      // circle above dotted line
      ctx.beginPath();
      ctx.strokeStyle = 'red';
      ctx.lineWidth = 10;
      ctx.fillStyle = 'white';
      ctx.setLineDash([]);
      ctx.arc(400, 170, 10, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.fill();

      // 6th rect
      ctx.beginPath();
      ctx.fillStyle = "orange";
      ctx.fillRect(928, 73, 30, 140);

      // inner small rect inside 6th rect
      ctx.beginPath();
      ctx.lineWidth = 1;
      ctx.strokeStyle = 'white';
      ctx.strokeRect(936, 122, 15, 21);

      //solid line
      ctx.beginPath();
      ctx.moveTo(730, 173);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "orange";
      ctx.lineTo(800, 173);
      ctx.stroke();

      //solid line
      ctx.beginPath();
      ctx.moveTo(730, 173);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "orange";
      ctx.lineTo(860, 173);
      ctx.stroke();

      //solid line - second track
      ctx.beginPath();
      ctx.moveTo(735, 173);
      ctx.lineWidth = 3;
      ctx.strokeStyle = "orange";
      ctx.lineTo(794, 114);
      ctx.stroke();

      // dashed line
      ctx.beginPath();
      ctx.strokeStyle = "orange";
      ctx.setLineDash([5, 5]);
      ctx.moveTo(600, 173);
      ctx.lineTo(1078, 173);
      ctx.stroke();

      // dashed line - second track
      ctx.beginPath();
      ctx.strokeStyle = "orange";
      ctx.setLineDash([5, 5]);
      ctx.moveTo(794, 114);
      ctx.lineTo(1078, 114);
      ctx.stroke();

    }
  </script>
</body>

</html>

JSmount: https://jsmount.com
HTML canvas draw image, draw an image on canvas javascript, draw an image on canvas html, HTML5 canvas draw the image, HTML5 canvas draw the line, HTML5 canvas draw a rectangle, HTML5 canvas draw a circle, HTML5 canvas draw text

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial

0

2 thoughts on “Draw Canvas Image, Line & Circle With HTML & JavaScript”

  1. Pingback: HTML Form with Pure CSS & JavaScript | Custom Radio and Checkbox JS Mount
  2. Pingback: JavaScript What is x++ & var x = x++ ? Increment & Decrement Operator

Leave a Reply

Your email address will not be published.