How to create Rectangle in HTML5 Canvas

rounded corner rectangle in HTML5 Canvas - Nibunan

Linear gradient effect in rectangle in HTML5 Canvas - Nibunan

Radial gradient effect in rectangle in HTML5 Canvas - Nibunan

Transparancy in rectangle in HTML5 Canvas - Nibunan

This airticle explains how to add rectangle in HTML5 Canvas. It also explains how to create the round corner rectangle, How to create linear gradient effect in rectangle, How to create radial gradient effect in rectangle and how to create the transparancy in rectangle.

Rectangle

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 rectangle 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 drawRectangle(x, y, width, height) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(255,0,0)';
      drawingSurface.fillRect(x, y, width, height);
      drawingSurface.strokeRect(x, y, width, height);
      }
      drawRectangle(100, 100, 400, 200);
      </script>
      </body>
      </html>
    

Rectangle with linear gradient

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 rectangle 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 getLinearGradient() {
      var grdient = drawingSurface.createLinearGradient(100, 50, 500, 50);
      grdient.addColorStop(0, "rgb(255,0,0)");
      grdient.addColorStop(1, "rgb(50,0,0)");
      return grdient;
      }
      function drawRectangle(x, y, width, height) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getLinearGradient();
      drawingSurface.fillRect(x, y, width, height);
      drawingSurface.strokeRect(x, y, width, height);
      }
      drawRectangle(100, 100, 400, 200);
      </script>
      </body>
      </html>
    

Rectangle with radial gradient gradient

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 rectangle 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(300, 200, 1, 300, 200, 200);
      grdient.addColorStop(0, "rgb(255,0,0)");
      grdient.addColorStop(1, "rgb(50,0,0)");
      return grdient;
      }
      function drawRectangle(x, y, width, height) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = getRadialGradient();
      drawingSurface.fillRect(x, y, width, height);
      drawingSurface.strokeRect(x, y, width, height);
      }
      drawRectangle(100, 100, 400, 200);
      </script>
      </body>
      </html>
    

Rectangle with transparency

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 rectangle 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 drawRectangle(x, y, width, height, strokeOpacity, fillOpacity) {
      drawingSurface.strokeStyle = 'black';
      drawingSurface.lineWidth = 3;
      drawingSurface.fillStyle = 'rgb(255,0,0)';
      drawingSurface.globalAlpha = fillOpacity;
      drawingSurface.fillRect(x, y, width, height);
      drawingSurface.globalAlpha = strokeOpacity;
      drawingSurface.strokeRect(x, y, width, height);
      }
      drawRectangle(100, 100, 400, 200, 1, 1);
      drawRectangle(300, 150, 400, 200, 0.5, 0.5);
      </script>
      </body>
      </html>