Javascript canvas graphics Step 1: Find the Canvas Element This is done by using the HTML DOM method getElementById(): var canvas = document.getElementById("myCanvas"); Step 2: Create a Drawing Object The getContext() returns a built-in HTML object, CanvasRenderingContext2D, with properties and methods for drawing in 2D. var ctx = canvas.getContext("2d"); Step 3: Draw on the Canvas Draw a rectangle Set the fill style of the drawing object to the color red: ctx.fillStyle = "#FF0000"; The fillRect(x,y,width,height) method draws a rectangle, filled with the fill style, on the canvas: ctx.fillRect(0,0,150,75); Draw a line Draw a circle ctx.moveTo(0,0); ctx.beginPath(); ctx.lineTo(200,100); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke(); ctx.stroke();
drawCoordinates(x,y) draws red circle at (x,y) <!DOCTYPE HTML> <canvas id= "canvas" width="600px" height="300px"></canvas> <script> var pointSize = 10; drawCoordinates(canvas.width/2, canvas.height/2); function drawCoordinates(x,y){ var c = document.getElementById("canvas").getContext("2d"); c.fillStyle = ‘red’; // Red color c.beginPath(); c.arc(x, y, pointSize, 0, Math.PI * 2, true); c.fill(); } </script> </html> drawCoordinates(x,y) draws red circle at (x,y)
Mouse click draws red circle <!DOCTYPE HTML> <canvas id= "canvas" width="600px" height="300px"></canvas> <script> var pointSize = 3; document.getElementById("canvas").addEventListener("click", getPosition); function getPosition(event){ var x = event.clientX ; var y = event.clientY; drawCoordinates(x,y); } function drawCoordinates(x,y){ var c = document.getElementById("canvas").getContext("2d"); c.fillStyle = ’red’; // Red color c.beginPath(); c.arc(x, y, pointSize, 0, Math.PI * 2, true); c.fill(); </script> </html> Mouse click draws red circle
<!DOCTYPE HTML> <canvas id= "canvas" width="600px" height="300px"></canvas> <script> var pointSize = 3; var culoare=['red',yellow','green']; document.getElementById("canvas").addEventListener("click", getPosition); function getPosition(event){ var x = event.clientX ; var y = event.clientY; var b = event.button; drawCoordinates(x,y,b); } function drawCoordinates(x,y,b){ var c = document.getElementById("canvas").getContext("2d"); //document.write(Math.random()*3); c.fillStyle = culoare[b]; // b=0 red color left button // b=1 yello color middle button // b=2 green color right button c.beginPath(); c.arc(x, y, pointSize, 0, Math.PI * 2, true); c.fill(); </script> </html>
document. getElementById("canvas") document.getElementById("canvas").addEventListener(“mousemove", getPosition); document.getElementById("canvas").addEventListener("mousemove", getPosition); document.getElementById("canvas").addEventListener("click", changeSize); function changeSize(){ pointSize+=1; } //red green blue - integer numbers bwtween 0 and 255 function RGB ( red, green, blue){ var c =0x1000000+ blue + 0x100 * green + 0x10000 *red ; return '#'+c.toString(16).substr(1); r=x%256; g=(y)%256; b=(x*y)%256; c.fillStyle=RGB (r, g, b);
<!DOCTYPE HTML> <body> <canvas id="canvas" width="600px" height="300px"></canvas> <script> var pointSize = 3; document.getElementById("canvas").addEventListener("mousedown", function(){getPosition(event, 'red'); } ); document.getElementById("canvas").addEventListener("mouseup", function(){getPosition(event, 'yellow'); } ); function getPosition(event, color ){ var x = event.clientX; var y = event.clientY; drawCoordinates(x,y, color ); } function drawCoordinates(x,y,color){ var c = document.getElementById("canvas").getContext("2d"); c.fillStyle=color; c.beginPath(); c.arc(x, y, pointSize, 0, Math.PI * 2, true); c.fill(); </script> </body> </html>
document. getElementById("canvas") document.getElementById("canvas").addEventListener("mousedown", function(e){color='red';} ); document.getElementById("canvas").addEventListener("mouseup", function(e){color='yellow';} ); document.getElementById("canvas").addEventListener("mousemove", function(e){getPosition(e,color);} ); document.getElementById("canvas").addEventListener("mousedown", getPosition ); function drawCoordinates(x,y){ var c = document.getElementById("canvas").getContext("2d"); c.fillStyle=color; c.beginPath(); c.moveTo(0,0); c.lineTo(x, y); c.stroke(); }
document. getElementById("canvas") document.getElementById("canvas").addEventListener("mousedown", doMouseDown); document.getElementById("canvas").addEventListener("mouseup", doMouseUp); var c = document.getElementById("canvas").getContext("2d"); function doMouseDown(event) { x=event.pageX; y=event.pageY; c.beginPath(); c.moveTo(x,y); } function doMouseUp(event) { c.lineTo(x, y); c.stroke();
document. getElementById("canvas") document.getElementById("canvas").addEventListener("mousedown", doMouseDown); var i=0; function doMouseDown(event) { var c = document.getElementById("canvas").getContext("2d"); x=event.pageX; y=event.pageY; i++; i%=2; if(i==1){ c.beginPath(); c.moveTo(x, y); } if(i==0){ c.lineTo(x, y); c.stroke(); c.closePath(); If var i =true boolean write the code!
var i=0,x1,y1; function doMouseDown(event) { var c = document.getElementById("canvas").getContext("2d"); x=event.pageX; y=event.pageY; i++; i%=2; if(i==1){ x1=x;y1=y; } if(i==0){ c.fillStyle='red'; c.rect(x1, y1, x-x1, y-y1); c.fill();
var i=0,x1,y1; function doMouseDown(event) { x=event.pageX; y=event.pageY; if(i==0){ x1=x;y1=y; i=1; } if(ii==1 && (x!=x1 && y!=y1) ){ var c = document.getElementById("canvas").getContext("2d"); c.fillStyle='red'; c.rect(x1, y1, x-x1, y-y1); c.fill(); i=0;
function doMouseDown(event) { var c = document.getElementById("canvas").getContext("2d"); vx=event.pageX/10; vy=(canvas.height-event.pageY)/10; x=0,y=canvas.height, g=1,dt=1; //deseneaza o traiectorie parabolica for(i=0;i<100;i++) { c.beginPath(); c.moveTo(x,y); x += vx*dt; y += -vy*dt; vx += 0; vy += -g*dt; c.lineTo(x, y); c.stroke(); }
if( (x-x0)*(x-x0)+ (y-y0)*(y-y0)<r*r ) { alert("Ai nimerit tinta!"); }
<!DOCTYPE HTML> <body> <span id="emo" style="font-size:10px" meta charset="UTF-8"> 😁 U+1F601</span> <p>Copy-paste emoji at !!! symbol</p> <span id="emo2" style="font-size:1em"> !!😁 U+1F601</span> <script> document.addEventListener("click", changeSize); var q=0x1F601; function changeSize(event){ document.getElementById("emo").style.fontSize= parseFloat(document.getElementById("emo").style.fontSize)+10+"px"; document.getElementById("emo2").style.fontSize= parseFloat(document.getElementById("emo2").style.fontSize)+0.2+"em"; q+=1; document.getElementById("emo").innerText = String.fromCodePoint(q)+"U+"+q.toString(16).toUpperCase(); } </script> </body> </html>
var x=0, y=0, vx=2, vy=2; document.getElementById("canvas").addEventListener("mousedown", doMouseDown); function doMouseDown(event) { vx = (event.pageX-x) / 50; vy = (event.pageY-y) / 50; } function miscare(){ var c = document.getElementById("canvas").getContext("2d"); c.fillStyle = 'white'; c.fillRect(0, 0, 600, 300); c.fillStyle = 'red'; c.fillRect(x, y, 20, 20); //c.font="20px Georgia"; //c.fillStyle='red'; //c.fillText("Hey!"+ String.fromCodePoint(0x1F601), x, y); x += vx; y += vy; setInterval( miscare, 20); Moves with velocity set by mouse relative position