How to create object using path in HTML5 Canvas

Object using path without gradient fill in HTML5 Canvas - Nibunan

Object using path with gradient fill in HTML5 Canvas - Nibunan

This airticle explains how to create sample object using graphics Path in HTML5 Canvas. It also explains how to create the sample Object in HTML5 Canvas using path with and without gradient fill.

Sample object with fill

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Create object in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <script type="text/javascript">
      var canvas = document.getElementById("drawing-surface");
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");
      function getRadialGradient() {
      var grdient = drawingSurface.createRadialGradient(430, 220, 1, 430, 220, 250);
      grdient.addColorStop(0, "rgb(255,255,255)");
      grdient.addColorStop(1, "rgb(255,200,0)");
      return grdient;
      }
      function drawArc(cx, cy, radius, startAngle, endAngle) {
      startAngle = startAngle * (2 / 360);
      endAngle = endAngle * (2 / 360);
      drawingSurface.arc(cx, cy, radius, startAngle * Math.PI, endAngle * Math.PI, false);
      }
      function drawBezierCurve(points) {
      for (var i = 0; i < points.length; i += 3) {
      drawingSurface.bezierCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, points[i + 2].x, points[i + 2].y);
      }
      }
      function drawEye() {
      drawingSurface.fillStyle = "white";
      drawingSurface.beginPath();
      drawArc(360, 170, 10, 0, 360);
      drawingSurface.fill();
      drawingSurface.stroke();
      }
      function drawObject() {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.fillStyle = getRadialGradient();
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawingSurface.moveTo(220, 200);
      drawBezierCurve([
      { x: 230, y: 200 },
      { x: 300, y: 220 },
      { x: 300, y: 200 }
      ]);
      drawArc(370, 180, 70, 180, 30);
      drawBezierCurve([
      { x: 400, y: 250 },
      { x: 600, y: 250 },
      { x: 600, y: 220 },
      { x: 650, y: 400 },
      { x: 550, y: 400 },
      { x: 400, y: 400 },
      { x: 350, y: 400 },
      { x: 250, y: 400 },
      { x: 300, y: 230 },
      { x: 250, y: 240 },
      { x: 200, y: 240 },
      { x: 220, y: 200 }
      ]);
      drawingSurface.closePath();
      drawingSurface.fill();
      drawingSurface.stroke();
      drawEye();
      }
      drawObject();
      </script>
      </body>
      </html>
    

Sample object without fill

Open with new tab

Source


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Create object in html5 canvas - Nibunan</title>
      </head>
      <body style="margin: 0px">
      <canvas width="700" height="450" id="drawing-surface"></canvas>
      <script type="text/javascript">
      var canvas = document.getElementById("drawing-surface");
      var drawingSurface = document.getElementById("drawing-surface").getContext("2d");

      function drawArc(cx, cy, radius, startAngle, endAngle) {
      startAngle = startAngle * (2 / 360);
      endAngle = endAngle * (2 / 360);
      drawingSurface.arc(cx, cy, radius, startAngle * Math.PI, endAngle * Math.PI, false);
      }
      function drawBezierCurve(points) {
      for (var i = 0; i < points.length; i += 3) {
      drawingSurface.bezierCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y, points[i + 2].x, points[i + 2].y);
      }
      }
      function drawEye() {
      drawingSurface.beginPath();
      drawArc(360, 170, 10, 0, 360);
      drawingSurface.stroke();
      }
      function drawObject() {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.beginPath();
      drawingSurface.moveTo(220, 200);
      drawBezierCurve([
      { x: 230, y: 200 },
      { x: 300, y: 220 },
      { x: 300, y: 200 }
      ]);
      drawArc(370, 180, 70, 180, 30);
      drawBezierCurve([
      { x: 400, y: 250 },
      { x: 600, y: 250 },
      { x: 600, y: 220 },
      { x: 650, y: 400 },
      { x: 550, y: 400 },
      { x: 400, y: 400 },
      { x: 350, y: 400 },
      { x: 250, y: 400 },
      { x: 300, y: 230 },
      { x: 250, y: 240 },
      { x: 200, y: 240 },
      { x: 220, y: 200 }
      ]);
      drawingSurface.closePath();
      drawingSurface.stroke();
      drawEye();
      }
      drawObject();
      </script>
      </body>
      </html>