Canvas
A basic example:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas</title> </head> <body> <canvas id="canvas" style="border: 2px dotted gold; width: 100vw; height: 100vh"></canvas> <script> var canvas = document.getElementById("canvas"); if(canvas.getContext){ var ctx = canvas.getContext("2d"); ctx.fillRect(90,60,120,60); //X, Y, WIDTH, HEIGHT } else{ alert('Your browser doesn't support HTML canvas'); } </script> </body> </html>
Examples of ‘command’:
ctx.fillStyle = "#FF0000"; //Rectangle ctx.fillRect(0,0,150,75); //Line ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); //Circle ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); //Create gradient var grd=ctx.createLinearGradient(0,0,200,0); grd.addColorStop(0,"red"); grd.addColorStop(1,"white"); //Fill with gradient ctx.fillStyle=grd; ctx.fillRect(10,10,150,80); //Text ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); //or ctx.strokeText("Hello World",10,50); ctx.fillStyle = "red"; ctx.textAlign = "center"; ctx.fillText("Hello World", canvas.width/2, canvas.height/2); //Image var img = document.getElementById("scream"); //or url ctx.drawImage(img, 10, 10);