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>