You are here

23 September 2012
Drawing a rectangle in canvas tag with rectangle functions.

Filled Rectangle:

This rectangle is filled with defined color.
Source code viewer
  1. <canvas id="canvas_filled_rectangle" width="250" height="250"></canvas>
Programming Language: XML
Javascript:
Source code viewer
  1. var canvas_filled_rectangle = document.getElementById("canvas_filled_rectangle").getContext("2d");
  2.  
  3. // what color to use when filling rectangle
  4. canvas_filled_rectangle.fillStyle = "#000";
  5. // draw filled rectangle: fillRect(x, y, width, height)
  6. canvas_filled_rectangle.fillRect(70, 70, 15, 15);
Programming Language: Javascript

Stroke Rectangle:

This is stroke rectangle, which means rectangle with border.
Source code viewer
  1. <canvas id="canvas_stroke_rectangle" width="250" height="250"></canvas>
Programming Language: XML
Javascript:
Source code viewer
  1. var canvas_stroke_rectangle = document.getElementById("canvas_stroke_rectangle").getContext("2d");
  2.  
  3. // what color to use for border
  4. canvas_stroke_rectangle.strokeStyle = "#000";
  5. // draw stroke rectangle: strokeRect(x, y, width, height)
  6. canvas_stroke_rectangle.strokeRect(70, 70, 15, 15);
Programming Language: Javascript

Clear Rectangle:

Clear defined rectangular area.
Source code viewer
  1. <canvas id="canvas_clear_rectangle" width="250" height="250"></canvas>
Programming Language: XML
Javascript:
Source code viewer
  1. var canvas_clear_rectangle = document.getElementById("canvas_clear_rectangle").getContext("2d");
  2.  
  3. // draw stroke rectangle: clearRect(x, y, width, height)
  4. canvas_clear_rectangle.clearRect(70, 70, 15, 15);
Programming Language: Javascript