image to use:
Revision:
<canvas id="canvas" width="600" height="400">
If you can see this, your browser does not support Canvas
</canvas>
<script>
let canvas;
let ctx;
let x = 300;
let y = 300;
let dx = 2;
let dy = 4;
let width_AA = 600;
let height_AA = 400;
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function reset() {
ctx.clearRect(0, 0, width, height);
}
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(animate, 10);
}
function animate() {
reset();
ctx.fillStyle = "seagreen";
rect(0,0,width_AA,height_AA);
ctx.fillStyle = "orange";
circle(x, y, 10);
if (x + dx > width_AA || x + dx < 0)
dx = -dx;
if (y + dy > height_AA || y + dy < 0)
dy = -dy;
x += dx;
y += dy;
}
init();
</script>
<canvas id="canvasA" width="400" height="400"><p>canvas</p></canvas>
<style>
#canvasA{top:1vw; border: .5vw solid black; background-image: linear-gradient(green, blue, red);}
</style>
<script>
let c = document.getElementById("canvasA");
let ctxA = c.getContext("2d");
ctxA.moveTo(0,0);
ctxA.lineTo(400,400);
ctxA.strokeStyle = "magenta";
ctxA. lineWidth = 15;
ctxA.stroke();
</script>
<canvas id="canvasB" width="400" height="400">canvas-1</canvas>
<script>
let d = document.getElementById("canvasB");
let ctxB = d.getContext("2d");
ctxB.beginPath();
ctxB.arc(200,200,120,0,2*Math.PI);
ctxB.strokeStyle = "magenta";
ctxB. lineWidth = 15;
ctxB.stroke();
</script>
<canvas id="canvasC" width="400" height="400">canvas-2</canvas>
<script>
let e = document.getElementById('canvasC')
let ctxC = e.getContext('2d');
ctxC.font = "40px Helvetica";
let gradient = ctxC.createLinearGradient(0, 0, e.width, 0);
gradient.addColorStop("0", "darkblue");
gradient.addColorStop("0.5", "brown");
gradient.addColorStop("1.0", "darkgreen");
ctxC.strokeStyle = gradient;
ctxC.strokeText("Hello World!", 100, 200);
</script>
<canvas id="canvasD" width="400" height="400">canvas-3</canvas>
<script>
let f = document.getElementById('canvasD');
let ctxD = f.getContext('2d');
let gradientD = ctxD.createRadialGradient(100,100,5,90,160,160);
gradientD.addColorStop(0, "red");
gradientD.addColorStop(1, "white");
ctxD.fillStyle = gradientD;
ctxD.fillRect(110, 110, 150, 90);
</script>
<div>
<h3>image to use:</h3>
<img id="Holiday" src="../images/1.jpg" width="400" height="400" alt="Holiday" style="margin-left: 10vw;"/>
<h3>canvas to fill:</h3>
<canvas id="canvasE" width="400" height="400">canvas-4</canvas>
<a><button onclick="canvasA()">try it</button></a>
</div>
<script>
function canvasA(){
let a = document.getElementById('canvasE');
let ctx = a.getContext('2d');
let img = document.getElementById('Holiday');
ctx.drawImage(img,0,0,400,400);
}
</script>
<canvas id="canvas_a" width="300" height="300"></canvas>
<script>
const canvas_a = document.getElementById('canvas_a');
const ctx_a = canvas_a.getContext('2d');
ctx_a.lineWidth = 10;
ctx_a.strokeRect(75, 140, 150, 110);
ctx_a.fillRect(130, 190, 40, 60);
ctx_a.beginPath();
ctx_a.moveTo(50, 140);
ctx_a.lineTo(150, 60);
ctx_a.lineTo(250,140);
ctx_a.closePath();
ctx_a.stroke();
</script>
<canvas id="canvas_1a" width="300" height="300"></canvas>
<script>
var canvas_1a = document.getElementById('canvas_1a');
if(canvas_1a.getContext) {
var ctx_1a = canvas_1a.getContext('2d');
ctx_1a.beginPath();
ctx_1a.lineWidth = 5;
ctx_1a.arc(150, 150, 100, 0, Math.PI * 2, true); // Outer circle
ctx_1a.moveTo(210, 160);
ctx_1a.arc(150, 160, 65, 0, Math.PI, false); // Mouth (clockwise)
ctx_1a.moveTo(123, 125);
ctx_1a.arc(115, 115, 10, 0, Math.PI * 2, true); // Left eye
ctx_1a.moveTo(195, 125);
ctx_1a.arc(190, 115, 10, 0, Math.PI * 2, true); // Right eye
ctx_1a.stroke();
}
</script>
<canvas id="canvas_2a" width="300" height="300"></canvas>
<script>
const canvas_2a = document.getElementById('canvas_2a');
if (canvas_2a.getContext) {
const ctx_2a = canvas_2a.getContext('2d');
// Filled triangle
ctx_2a.beginPath();
ctx_2a.moveTo(50, 50);
ctx_2a.lineTo(280, 50);
ctx_2a.lineTo(50, 180);
ctx_2a.fill();
// Stroked triangle
ctx_2a.beginPath();
ctx_2a.moveTo(290, 50);
ctx_2a.lineTo(50, 190);
ctx_2a.lineTo(290, 185);
ctx_2a.closePath();
ctx_2a.stroke();
}
</script>
<canvas id="canvas_3a" width="300" height="300"></canvas>
<script>
let canvas_3a = document.getElementById('canvas_3a');
if (canvas_3a.getContext) {
let ctx_3a = canvas_3a.getContext('2d');
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 3; j++) {
ctx_3a.beginPath();
let x = 65 + j * 70; // x coordinate
let y = 65 + i * 70; // y coordinate
let radius = 30; // Arc radius
let startAngle = 0; // Starting point on circle
let endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
let anticlockwise = i % 2 !== 0; // clockwise or anticlockwise
ctx_3a.arc(x, y, radius, startAngle, endAngle, anticlockwise);
if (i > 1) {
ctx_3a.fill();
} else {
ctx_3a.stroke();
}
}
}
}
</script>
<canvas id="canvas_4a" width="300" height="300"></canvas>
<script>
function draw() {
let canvas_4a = document.getElementById('canvas_4a');
if (canvas_4a.getContext) {
let ctx_4a = canvas_4a.getContext('2d');
// Quadratric curves example
ctx_4a.beginPath();
ctx_4a.moveTo(175, 125);
ctx_4a.quadraticCurveTo(125, 125, 125, 162.5);
ctx_4a.quadraticCurveTo(125, 200, 150, 200);
ctx_4a.quadraticCurveTo(150, 220, 130, 225);
ctx_4a.quadraticCurveTo(160, 220, 165, 200);
ctx_4a.quadraticCurveTo(225, 200, 225, 162.5);
ctx_4a.quadraticCurveTo(225, 125, 175, 125);
ctx_4a.stroke();
}
}
draw();
</script>
<canvas id="canvas_5a" width="300" height="300"></canvas>
<script>
function draw1() {
const canvas_5a = document.getElementById('canvas_5a');
if (canvas_5a.getContext) {
const ctx_5a = canvas_5a.getContext('2d');
// Cubic curves example
ctx_5a.beginPath();
ctx_5a.moveTo(75, 40);
ctx_5a.bezierCurveTo(75, 37, 70, 25, 50, 25);
ctx_5a.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
ctx_5a.bezierCurveTo(20, 80, 40, 102, 75, 120);
ctx_5a.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
ctx_5a.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
ctx_5a.bezierCurveTo(85, 25, 75, 37, 75, 40);
ctx_5a.fillStyle = "red";
ctx_5a.fill();
}
}
draw1();
</script>
<canvas id="canvas_6a" width="300" height="300"></canvas>
<script>
function draw2() {
var canvas_6a = document.getElementById('canvas_6a');
if (canvas_6a.getContext) {
var ctx_6a = canvas_6a.getContext('2d');
roundedRect(ctx_6a, 12, 12, 150, 150, 15);
roundedRect(ctx_6a, 19, 19, 150, 150, 9);
roundedRect(ctx_6a, 53, 53, 49, 33, 10);
roundedRect(ctx_6a, 53, 119, 49, 16, 6);
roundedRect(ctx_6a, 135, 53, 49, 33, 10);
roundedRect(ctx_6a, 135, 119, 25, 49, 10);
ctx_6a.beginPath();
ctx_6a.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
ctx_6a.lineTo(31, 37);
ctx_6a.fill();
for (var i = 0; i < 8; i++) {
ctx_6a.fillRect(51 + i * 16, 35, 4, 4);
}
for (i = 0; i < 6; i++) {
ctx_6a.fillRect(115, 51 + i * 16, 4, 4);
}
for (i = 0; i < 8; i++) {
ctx_6a.fillRect(51 + i * 16, 99, 4, 4);
}
ctx_6a.beginPath();
ctx_6a.moveTo(83, 116);
ctx_6a.lineTo(83, 102);
ctx_6a.bezierCurveTo(83, 94, 89, 88, 97, 88);
ctx_6a.bezierCurveTo(105, 88, 111, 94, 111, 102);
ctx_6a.lineTo(111, 116);
ctx_6a.lineTo(106.333, 111.333);
ctx_6a.lineTo(101.666, 116);
ctx_6a.lineTo(97, 111.333);
ctx_6a.lineTo(92.333, 116);
ctx_6a.lineTo(87.666, 111.333);
ctx_6a.lineTo(83, 116);
ctx_6a.fill();
ctx_6a.fillStyle = 'white';
ctx_6a.beginPath();
ctx_6a.moveTo(91, 96);
ctx_6a.bezierCurveTo(88, 96, 87, 99, 87, 101);
ctx_6a.bezierCurveTo(87, 103, 88, 106, 91, 106);
ctx_6a.bezierCurveTo(94, 106, 95, 103, 95, 101);
ctx_6a.bezierCurveTo(95, 99, 94, 96, 91, 96);
ctx_6a.moveTo(103, 96);
ctx_6a.bezierCurveTo(100, 96, 99, 99, 99, 101);
ctx_6a.bezierCurveTo(99, 103, 100, 106, 103, 106);
ctx_6a.bezierCurveTo(106, 106, 107, 103, 107, 101);
ctx_6a.bezierCurveTo(107, 99, 106, 96, 103, 96);
ctx_6a.fill();
ctx_6a.fillStyle = 'black';
ctx_6a.beginPath();
ctx_6a.arc(101, 102, 2, 0, Math.PI * 2, true);
ctx_6a.fill();
ctx_6a.beginPath();
ctx_6a.arc(89, 102, 2, 0, Math.PI * 2, true);
ctx_6a.fill();
}
}
// A utility function to draw a rectangle with rounded corners.
function roundedRect(ctx_6, x, y, width, height, radius) {
ctx_6a.beginPath();
ctx_6a.moveTo(x, y + radius);
ctx_6a.lineTo(x, y + height - radius);
ctx_6a.arcTo(x, y + height, x + radius, y + height, radius);
ctx_6a.lineTo(x + width - radius, y + height);
ctx_6a.arcTo(x + width, y + height, x + width, y + height-radius, radius);
ctx_6a.lineTo(x + width, y + radius);
ctx_6a.arcTo(x + width, y, x + width - radius, y, radius);
ctx_6a.lineTo(x + radius, y);
ctx_6a.arcTo(x, y, x, y + radius, radius);
ctx_6a.stroke();
}
draw2();
</script>
<canvas id="canvas_b" width="300" height="300"></canvas>
<script>
function draw3() {
let ctx_b = document.getElementById('canvas_b').getContext('2d');
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx_b.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ', ' +
Math.floor(255 - 42.5 * j) + ', 0)';
ctx_b.fillRect(j * 40, i * 40, 40, 40);
}
}
}
draw3()
</script>
<canvas id="canvas_1b" width="300" height="300"></canvas>
<script>
function draw4() {
let ctx_1b = document.getElementById('canvas_1b').getContext('2d');
for (let i = 0; i < 6; i++) {
for (let j = 0; j < 6; j++) {
ctx_1b.strokeStyle = 'rgb(0, ' + Math.floor(255 - 42.5 * i) + ', ' +
Math.floor(255 - 42.5 * j) + ')';
ctx_1b.beginPath();
ctx_1b.arc(12.5 + j * 40, 12.5 + i * 40, 10, 0, Math.PI * 2, true);
ctx_1b.stroke();
}
}
}
draw4();
</script>
<script>
function draw5() {
const ctx_2b = document.getElementById('canvas_2b').getContext('2d');
// draw background
ctx_2b.fillStyle = '#FD0';
ctx_2b.fillRect(0, 0, 120, 120);
ctx_2b.fillStyle = '#6C0';
ctx_2b.fillRect(120, 0, 120, 120);
ctx_2b.fillStyle = '#09F';
ctx_2b.fillRect(0, 120, 120, 120);
ctx_2b.fillStyle = '#F30';
ctx_2b.fillRect(120, 120, 120, 120);
ctx_2b.fillStyle = '#FFF';
// set transparency value
ctx_2b.globalAlpha = 0.2;
// Draw semi transparent circles
for (var i = 0; i < 7; i++) {
ctx_2b.beginPath();
ctx_2b.arc(120, 120, 10 + 10 * i, 0, Math.PI * 2, true);
ctx_2b.fill();
}
}
draw5();
</script>
<canvas id="canvas_3b" width="300" height="300"></canvas>
<script>
function draw6() {
let ctx_3b = document.getElementById('canvas_3b').getContext('2d');
// Draw background
ctx_3b.fillStyle = 'rgb(255, 221, 0)';
ctx_3b.fillRect(0, 0, 250, 80);
ctx_3b.fillStyle = 'rgb(102, 204, 0)';
ctx_3b.fillRect(0, 80, 250, 80);
ctx_3b.fillStyle = 'rgb(0, 153, 255)';
ctx_3b.fillRect(0, 160, 250, 80);
ctx_3b.fillStyle = 'rgb(255, 51, 0)';
ctx_3b.fillRect(0, 240, 250, 80);
// Draw semi transparent rectangles
for (let i = 0; i < 10; i++) {
ctx_3b.fillStyle = 'rgba(255, 255, 255, ' + (i + 1) / 10 + ')';
for (let j = 0; j < 4; j++) {
ctx_3b.fillRect(5 + i * 25, 5 + j * 80, 18, 60);
}
}
}
draw6();
</script>
<canvas id="canvas_4b" width="300" height="300"></canvas>
<script>
function draw7() {
const ctx_4b = document.getElementById('canvas_4b').getContext('2d');
for (var i = 0; i < 10; i++) {
ctx_4b.lineWidth = 2 + i;
ctx_4b.beginPath();
ctx_4b.moveTo(9 + i * 21, 5);
ctx_4b.lineTo(9 + i * 21, 240);
ctx_4b.stroke();
}
}
draw7();
</script>
<canvas id="canvas_5b" width="300" height="300"></canvas>
<script>
function draw8() {
const ctx_5b = document.getElementById('canvas_5b').getContext('2d');
const lineCap = ['butt', 'round', 'square'];
// Draw guides
ctx_5b.strokeStyle = '#09f';
ctx_5b.beginPath();
ctx_5b.moveTo(10, 10);
ctx_5b.lineTo(140, 10);
ctx_5b.moveTo(10, 240);
ctx_5b.lineTo(140, 240);
ctx_5b.stroke();
// Draw lines
ctx_5b.strokeStyle = 'black';
for (var i = 0; i < lineCap.length; i++) {
ctx_5b.lineWidth = 20;
ctx_5b.lineCap = lineCap[i];
ctx_5b.beginPath();
ctx_5b.moveTo(25 + i * 50, 10);
ctx_5b.lineTo(25 + i * 50, 240);
ctx_5b.stroke();
}
}
draw8();
</script>
<canvas id="canvas_6b" width="300" height="300"></canvas>
<script>
function draw9() {
const ctx_6b = document.getElementById('canvas_6b').getContext('2d');
const lineJoin = ['round', 'bevel', 'miter'];
ctx_6b.lineWidth = 10;
for (let i = 0; i < lineJoin.length; i++) {
ctx_6b.lineJoin = lineJoin[i];
ctx_6b.beginPath();
ctx_6b.moveTo(-5, 5 + i * 40);
ctx_6b.lineTo(35, 45 + i * 40);
ctx_6b.lineTo(75, 5 + i * 40);
ctx_6b.lineTo(115, 45 + i * 40);
ctx_6b.lineTo(155, 5 + i * 40);
ctx_6b.stroke();
}
}
draw9();
</script>
<canvas id="canvas_7b" width="300" height="300"></canvas>
<script>
function draw10() {
const ctx_7b = document.getElementById('canvas_7b').getContext('2d');
// Create gradients
let radgrad = ctx_7b.createRadialGradient(45, 45, 10, 52, 50, 30);
radgrad.addColorStop(0, '#A7D30C');
radgrad.addColorStop(0.9, '#019F62');
radgrad.addColorStop(1, 'rgba(1, 159, 98, 0)');
let radgrad2 = ctx_7b.createRadialGradient(105, 105, 20, 112, 120, 50);
radgrad2.addColorStop(0, '#FF5F98');
radgrad2.addColorStop(0.75, '#FF0188');
radgrad2.addColorStop(1, 'rgba(255, 1, 136, 0)');
let radgrad3 = ctx_7b.createRadialGradient(95, 15, 15, 102, 20, 40);
radgrad3.addColorStop(0, '#00C9FF');
radgrad3.addColorStop(0.8, '#00B5E2');
radgrad3.addColorStop(1, 'rgba(0, 201, 255, 0)');
let radgrad4 = ctx_7b.createRadialGradient(0, 150, 50, 0, 140, 90);
radgrad4.addColorStop(0, '#F4F201');
radgrad4.addColorStop(0.8, '#E4C700');
radgrad4.addColorStop(1, 'rgba(228, 199, 0, 0)');
// draw shapes
ctx_7b.fillStyle = radgrad4;
ctx_7b.fillRect(0, 0, 250, 250);
ctx_7b.fillStyle = radgrad3;
ctx_7b.fillRect(0, 0, 250, 250);
ctx_7b.fillStyle = radgrad2;
ctx_7b.fillRect(0, 0, 250, 250);
ctx_7b.fillStyle = radgrad;
ctx_7b.fillRect(0, 0, 250, 250);
}
draw10();
</script>
<canvas id="canvas_c" width="300" height="300"></canvas>
<script>
function draw11() {
let ctx_c = document.getElementById('canvas_c').getContext('2d');
let img = new Image();
img.onload = function() {
for (let i = 0; i < 4; i++) {
for (let j = 0; j < 3; j++) {
ctx_c.drawImage(img, j * 110, i * 80, 90, 76);
}
}
};
img.src = '../images/1.jpg';
}
draw11();
</script>
<canvas id="canvas_1c" width="300" height="300"></canvas>
<script>
function draw12() {
let ctx_1c = document.getElementById('canvas_1c').getContext('2d');
var img = new Image();
img.onload = function() {
ctx_1c.drawImage(img, 0, 0);
ctx_1c.beginPath();
ctx_1c.moveTo(30, 96);
ctx_1c.lineTo(70, 66);
ctx_1c.lineTo(103, 76);
ctx_1c.lineTo(170, 15);
ctx_1c.lineWidth = 5;
ctx_1c.stroke();
};
img.src = '../images/2.jpg';
}
draw12();
</script>
<canvas id="canvas_2c" width="300" height="300"></canvas>
<script>
function draw13() {
let ctx_2c = document.getElementById('canvas_2c').getContext('2d');
ctx_2c.fillRect(0, 0, 250, 250); // Draw a rectangle with default settings
ctx_2c.save(); // Save the default state
ctx_2c.fillStyle = '#09F'; // Make changes to the settings
ctx_2c.fillRect(25, 25, 200, 200); // Draw a rectangle with new settings
ctx_2c.save(); // Save the current state
ctx_2c.fillStyle = '#FFF'; // Make changes to the settings
ctx_2c.globalAlpha = 0.5;
ctx_2c.fillRect(50, 50, 150, 150); // Draw a rectangle with new settings
ctx_2c.restore(); // Restore previous state
ctx_2c.fillRect(75, 75, 100, 100); // Draw a rectangle with restored settings
ctx_2c.restore(); // Restore original state
ctx_2c.fillRect(100, 100, 50, 50); // Draw a rectangle with restored settings
}
draw13();
</script>
<canvas id="canvas_3c" width="300" height="300"></canvas>
<script>
function draw14() {
var ctx_3c = document.getElementById('canvas_3c').getContext('2d');
for (var i = 0; i < 3; i++) {
for (var j = 0; j < 3; j++) {
ctx_3c.save();
ctx_3c.fillStyle = 'rgb(' + (51 * i) + ', ' + (255 - 51 * i) + ', 255)';
ctx_3c.translate(10 + j * 90, 10 + i * 90);
ctx_3c.fillRect(0, 0, 50, 50);
ctx_3c.restore();
}
}
}
draw14();
</script>
<canvas id="canvas_4c" width="300" height="300"></canvas>
<script>
function draw15() {
let ctx_4c = document.getElementById('canvas_4c').getContext('2d');
// left rectangles, rotate from canvas origin
ctx_4c.save();
// blue rect
ctx_4c.fillStyle = '#0095DD';
ctx_4c.fillRect(30, 30, 100, 100);
ctx_4c.rotate((Math.PI / 180) * 25);
// grey rect
ctx_4c.fillStyle = '#4D4E53';
ctx_4c.fillRect(30, 30, 100, 100);
ctx_4c.restore();
// right rectangles, rotate from rectangle center
// draw blue rect
ctx_4c.fillStyle = '#0095DD';
ctx_4c.fillRect(150, 30, 100, 100);
ctx_4c.translate(200, 80); // translate to rectangle center
// x = x + 0.5 * width
// y = y + 0.5 * height
ctx_4c.rotate((Math.PI / 180) * 25); // rotate
ctx_4c.translate(-200, -80); // translate back
// draw grey rect
ctx_4c.fillStyle = '#4D4E53';
ctx_4c.fillRect(150, 30, 100, 100);
}
draw15();
</script>
<canvas id="canvas_5c" width="300" height="300"></canvas>
<script>
function draw16() {
var ctx_5c = document.getElementById('canvas_5c').getContext('2d');
// draw a simple rectangle, but scale it.
ctx_5c.save();
ctx_5c.scale(25, 3);
ctx_5c.fillRect(1, 10, 20, 20);
ctx_5c.restore();
// mirror horizontally
ctx_5c.scale(-1, 1);
ctx_5c.font = '48px serif';
ctx_5c.fillText('MDN', -135, 150);
}
draw16();
</script>
<canvas id="canvas_6c" width="300" height="300"></canvas>
<script>
function draw17() {
const ctx_6c = document.getElementById('canvas_6c').getContext('2d');
const sin = Math.sin(Math.PI / 6);
const cos = Math.cos(Math.PI / 6);
ctx_6c.translate(100, 100);
let c = 0;
for (let i = 0; i <= 12; i++) {
c = Math.floor(255 / 12 * i);
ctx_6c.fillStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
ctx_6c.fillRect(0, 0, 100, 10);
ctx_6c.transform(cos, sin, -sin, cos, 0, 0);
}
ctx_6c.setTransform(-1, 0, 0, 1, 100, 100);
ctx_6c.fillStyle = 'rgba(255, 128, 255, 0.5)';
ctx_6c.fillRect(0, 50, 100, 100);
}
draw17();
</script>
<div>
<canvas class="canvas-A">
<p>Description of the canvas for those unable to view it.</p>
</canvas>
</div>
<script>
const canvas_A = document.querySelector(".canvas-A");
const width = (canvas_A.width = window.innerWidth/2);
const height = (canvas_A.height = window.innerHeight/2);
const ctx_A = canvas_A.getContext("2d");
ctx_A.fillStyle = "rgb(150,150,150)";
ctx_A.fillRect(0,0, width, height)
</script>
<div>
<canvas class="canvas-B">
<p>Description of the canvas for those unable to view it.</p>
</canvas>
</div>
<style>
.canvas-B{border: 0.2vw solid blue;}
</style>
<script>
const canvas_B = document.querySelector(".canvas-B");
const width_B = (canvas_B.width = window.innerWidth/2);
const height_B = (canvas_B.height = window.innerHeight/2);
const ctx_B = canvas_B.getContext("2d");
ctx_B.fillStyle = "rgb(150,150,150)";
ctx_B.fillRect(0,0, width, height);
ctx_B.fillStyle = "rgb(250,0,0)";
ctx_B.fillRect(50,50, 100, 150);
ctx_B.fillStyle = "rgb(0,250,0)";
ctx_B.fillRect(75,75, 100, 100);
ctx_B.fillStyle = "rgb(255,0,255, 0.75)";
ctx_B.fillRect(125,100, 175, 50);
ctx_B.strokeStyle = "rgb(255, 255, 255)";
ctx_B.lineWidth = 5;
ctx_B.strokeRect(25, 25, 300, 200)
ctx_B.fillStyle = "rgb(255, 255, 25)";
ctx_B.beginPath();
ctx_B.moveTo(450, 50);
ctx_B.lineTo(650, 50);
const triHeight = 110 * Math.tan(degToRad(60));
ctx_B.lineTo(550, 50 + triHeight);
ctx_B.lineTo(450, 50);
ctx_B.fill();
function degToRad(degrees){
return(degrees * Math.PI)/180;
}
ctx_B.fillStyle = "rgb(0, 200, 255)";
ctx_B.beginPath();
ctx_B.arc(150, 356, 70, degToRad(0), degToRad(360), false);
ctx_B.fill();
ctx_B.fillStyle = "yellow";
ctx_B.beginPath();
ctx_B.arc(400, 356, 50, degToRad(-45), degToRad(45), true);
ctx_B.lineTo(400, 356);
ctx_B.fill();
</script>
<div>
<canvas class="canvas-C">
<p>Description of the canvas for those unable to view it.</p>
</canvas>
</div>
<style>
.canvas-C{border: 0.2vw solid blue;}
</style>
<script>
const canvas_C = document.querySelector(".canvas-C");
const width_C = (canvas_C.width = window.innerWidth/2);
const height_C = (canvas_C.height = window.innerHeight/2);
const ctx_C = canvas_C.getContext("2d");
ctx_C.fillStyle = "rgb(150,150,150)";
ctx_C.fillRect(0,0, width, height);
ctx_C.strokeStyle = "white";
ctx_C.lineWidth = 1;
ctx_C.font = "36px arial";
ctx_C.strokeText("Canvas text", 50, 50);
ctx_C.fillStyle = "red";
ctx_C.font = "48px georgia";
ctx_C.fillText("Canvas text", 50, 150);
canvas_C.setAttribute("aria-label", "Canvas text");
ctx_C.fillStyle = "blue";
ctx_C.font = "48px georgia";
ctx_C.fillText("Nice playing with text", 150, 250);
canvas_C.setAttribute("aria-label", "Nice playing with text");
</script>
<div>
<canvas class="canvas-D">
<p>Description of the canvas for those unable to view it.</p>
</canvas>
</div>
<style>
.canvas-D{border: 0.2vw solid blue;}
</style>
<script>
const canvas_D = document.querySelector(".canvas-D");
const width_D = (canvas_D.width = window.innerWidth/2);
const height_D = (canvas_D.height = window.innerHeight/2);
const ctx_D = canvas_D.getContext("2d");
ctx_D.fillStyle = "rgb(150,150,150)";
ctx_D.fillRect(0,0, width, height);
const image = new Image();
image.src = "../images/smiley.png";
image.addEventListener("load", () => ctx_D.drawImage(image, 20,
20));
image.addEventListener("load", () => ctx_D.drawImage(image, 250,
250));
</script>
<div>
<canvas class="canvas-E">
<p>Description of the canvas for those unable to view it.</p>
</canvas>
</div>
<style>
.canvas-E{border: 0.2vw solid blue;}
</style>
<script>
const canvas_E = document.querySelector(".canvas-E");
const width_E = (canvas_E.width = window.innerWidth/2);
const height_E = (canvas_E.height = window.innerHeight/2);
const ctx_E = canvas_E.getContext("2d");
ctx_E.fillStyle = "rgb(150,150,150)";
ctx_E.fillRect(0,0, width, height);
ctx_E.translate (width/2, height/2)
function degToRad_1(degrees) {
return (degrees * Math.PI) / 180;
}
function rand(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
let length = 250;
let moveOffset = 20;
for (let i = 0; i < length; i++) {
ctx_E.fillStyle = `rgba(${255 - length},0,${255 - length},0.9)`;
ctx_E.beginPath();
ctx_E.moveTo(moveOffset, moveOffset);
ctx_E.lineTo(moveOffset + length, moveOffset);
const triHeight_2 = (length / 2) * Math.tan(degToRad_1(60));
ctx_E.lineTo(moveOffset + length / 2, moveOffset + triHeight_2);
ctx_E.lineTo(moveOffset, moveOffset);
ctx_E.fill();
length--;
moveOffset += 0.7;
ctx_E.rotate(degToRad_1(5));
}
</script>
<div>
<canvas class="canvas-F">
<p>a guy walking.</p>
</canvas>
</div>
<style>
.canvas-F{border: 0.2vw solid blue;}
</style>
<script>
const canvas_F = document.querySelector(".canvas-F");
const width_F = (canvas_F.width = window.innerWidth/2);
const height_F = (canvas_F.height = window.innerHeight/2);
const ctx_F = canvas_F.getContext("2d");
ctx_F.fillStyle = "rgb(150,150,150)";
ctx_F.fillRect(0,0, width, height);
ctx_F.translate( width /2, height / 2);
const image_F = new Image();
image_F.src = "../images/walk-right.png";
image_F.onload = draw;
let sprite = 0;
let posX = 0;
function draw18(){
ctx_F.fillRect(-(width / 2 ), -(height / 2 ), width, height);
ctx_F.drawImage(image_F, sprite * 102, 0, 102, 148, 0 + posX, -74, 102, 148);
if (posX % 13 === 0) {
if (sprite === 5) {
sprite = 0;
} else {
sprite++;
}
}
if (posX > width / 2) {
let newStartPos = -(width / 2 + 102);
posX = Math.ceil(newStartPos);
console.log(posX);
} else {
posX += 2;
}
window.requestAnimationFrame(draw);
};
</script>
change the inputs in the function to create different shapes
<div>
<canvas id="canvas-X"> </canvas>
</div>
<script>
const canvas_X = document.querySelector("#canvas-X");
canvas_X.width = 400;
canvas_X.height = 200;
const ctx_X = canvas_X.getContext("2d");
const cx_X = 1200;
const cy_X = 200;
function drawShape (x, y, r, sides){
// move the canvas to the center position
ctx_X.translate(x, y);
for (let i = 0; i < sides; i++) {
// calculate the rotation
const rotation = ((Math.PI * 2) / sides) * i;
// for the first point move to
if (i === 0) {
ctx_X.moveTo(r * Math.cos(rotation), r * Math.sin(rotation));
} else {
// for the rest draw a line
ctx_X.lineTo(r * Math.cos(rotation), r * Math.sin(rotation));
}
}
// close path and stroke it
ctx_X.closePath();
ctx_X.stroke();
// reset the translate position
ctx_X.resetTransform();
}
drawShape(100,100,100,6)
</script>