HTML Canvas

• The Canvas element in HTML is used to draw graphics via JavaScript. 
• It is a rectangular area that allows for dynamic, scriptable rendering of 2D shapes and bitmap images.

Syntax:

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

Canvas Methods

• Fill Rect: Draw a filled rectangle.

Syntax:

.fillRect(x, y, width, height)

• Stroke Rect: Draws a rectangular outline.

Syntax:

.strokeRect(x, y, width, height)

• Clear Rect: Clears a specified rectangular area.

Syntax:

.clearRect(x, y, width, height)

• Begin Path: Starts a new path.

Syntax:

.beginPath()

• Move To: Moves the pen to specified coordinates.

Syntax:

.moveTo(x, y)

• Line To: Draw a line to specified coordinates.

Syntax:

.lineTo(x, y)

• Stroke: Strokes the current path.

Syntax:

.stroke()

• Fill Text: Draws filled text at the specified coordinates.

Syntax:

.fillText(text, x, y)

• Stroke Text: Draws text outline at the specified coordinates.

Syntax:

.strokeText(text, x, y)

Basic Drawing Operations

You must get its rendering context and use various drawing methods to draw on a canvas.

Setting Up the Canvas:

<!-- Rendering Context -->
<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
</script>

• var canvas = document.getElementById('myCanvas');: This gets the canvas element from the DOM.
• var ctx = canvas.getContext('2d');: This gets the 2D drawing context of the canvas, which provides methods and properties to draw and manipulate graphics on the canvas.

Drawing Shapes: 

• Drawing Line or Paths:

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  
  ctx.moveTo(50, 50);
  ctx.lineTo(200, 50);
  ctx.lineTo(200, 200);
  ctx.closePath();
  ctx.stroke();
</script>

• Drawing Rectangle: 

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');

  ctx.fillStyle = 'blue';
  ctx.fillRect(10, 10, 150, 100);

  ctx.strokeStyle = 'red';
  ctx.strokeRect(200, 10, 150, 100);
</script>

• Drawing Circle: 

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  ctx.beginPath();
  ctx.arc(95, 50, 40, 0, 2 * Math.PI);
  ctx.stroke();
</script>

• Drawing Text:

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.font = "30px Arial";
  ctx.fillText("Graphics by QUIPOIN", 10, 50);
</script>

Creating colour gradients

Creating Gradient:

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


var grd = ctx.createGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");
</script>

• Linear Gradient:

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


var grd = ctx.createLinearGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");

ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

• Circular Gradient:

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");


var grd = ctx.createRadialGradient(75, 50, 5, 90, 60, 100);
grd.addColorStop(0, "red");
grd.addColorStop(1, "white");


ctx.fillStyle = grd;
ctx.fillRect(10, 10, 150, 80);
</script>

Working with Images

You can also draw images onto the canvas.

<canvas id="myCanvas" width="500" height="500"></canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = new Image();
img.src = 'path/to/image.jpg';
img.onload = function() {
  ctx.drawImage(img, 0, 0);
};
</script>