Hi
I am trying to recreate the old Pong game using JS. I am getting this code
function init(){ var canvas=document.getElementById('play');var ctx=canvas.getContext('2d');ctx.fillStyle='green';ctx.fillRect(0,0,800,400);var c = document.getElementById("play");var ctx = c.getContext("2d");ctx.beginPath();ctx.arc(95,50,40,0,2*Math.PI);ctx.fillStyle = "red";ctx.fill();}document.addEventListener("DOMContentLoaded", init, false);
to produce a green rectangle with a red circle on it, except the circle becomes an oval if I define the size of the canvas in either JS or CSS.
The present code is just to get the range, but the oval circle is annoying. Does anyone know why it is happening? I have attached the HTML file as well.
Also since this is a JavaScript forum why cant I attach the original .js file?
index.html