bloodaxe 0 Posted July 15, 2014 Report Share Posted July 15, 2014 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 Quote Link to post Share on other sites
davej 251 Posted July 16, 2014 Report Share Posted July 16, 2014 Breaking a simple file into three pieces is rather pointless unless the file is growing rather large. As a single file it can easily be posted here... <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"/><title>title</title><style>#play{border:1px solid black;width: 800px;}</style><script>window.onerror = function(m, u, l){alert('Javascript Error: '+m+'nURL: '+u+'nLine Number: '+l);return true;}</script><script>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);</script></head><body><div id="panel"></div><canvas id="play"></canvas></body></html> Quote Link to post Share on other sites
bloodaxe 0 Posted July 16, 2014 Author Report Share Posted July 16, 2014 Hi; you have a different view from me. All I have learned so far suggests keeping the HTML for laying out the page with any styling done in the css document (beginning HTML, XHTML, CSS and JavaScript by Jon Duckett ) and I have learned my JS from Codecademy and JS in easy steps all of which emphasise separate .js files. It actually makes the code clearer and more re-usable. The actual problem is simply that whether I set the canvas size statically in the .css or do so dynamically in the .js the circle drawn by the above code comes out an oval. If I leave out the background color style element the circle becomes a circle on a white background. Regards bloodaxe. Quote Link to post Share on other sites
davej 251 Posted July 16, 2014 Report Share Posted July 16, 2014 I don't see the problem. Quote Link to post Share on other sites
Hadien 39 Posted July 17, 2014 Report Share Posted July 17, 2014 I've tried your code myself and I only see a circle. Perhaps it has something to do with your system? Try the code on another machine (different browser and operating system if possible) and see if you get the same phenomena. Also: var c = document.getElementById("play");var ctx = c.getContext("2d"); you don't need these lines since you've already defined what the context and canvas was. Even more so since you never even use the variables... I've rewritten up your code into jsfiddle to help follow along. I've written two quick examples to making circles in different ways, take a look and see if they look like circles on jsfiddle (possible its something else the the CSS or js files which you haven't posted that is causing the problem). I've also made some small demos to making circles (specifically with the radial gradient) which included mouse interaction on jsfiddle as well way back when I first started playing with canvases. Canvas SpotlightCanvas Eyeballs on an extra note I should ask, when these circles look like ovals, has the circle "moved" on the canvas? its possible you're not properly double-buffering the animation (with clearRect()) or drawing onto the canvas at an improper order that you're getting the illusion of an oval, my spotlight example suffers from this, if you zip the mouse around quickly (due to me running fillRect() in a sub-optimal order). Quote Link to post Share on other sites
bloodaxe 0 Posted July 17, 2014 Author Report Share Posted July 17, 2014 Hi whatever was happening doesn't when I use your code so God knows what it was. I haven't got as far as animation yet, I was just sort of seeing how to draw the 'ball' on the canvas with a green background. I am pretty new to this stuff, I did Pong years ago in VB6 and thought it would be an interesting exercise to write it in JS. Thanks for your help. Bloodaxe. Quote Link to post Share on other sites
Ingolme 1,019 Posted July 18, 2014 Report Share Posted July 18, 2014 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. Maybe I'm late to the thread. But here's the problem: When you set the size of an image using CSS (or Javascript's style.width, style.height) the image gets distorted. This happens with any image, even a canvas element. If you want to change the amount of pixels that are in the canvas, use the canvas width and height attributes/properties. Using HTML: <canvas id="myCanvas" width="500" height="600"></canvas> Using Javascript: canvas = document.getElementById("myCanvas");canvas.width = 500;canvas.height = 600; All I have learned so far suggests keeping the HTML for laying out the page with any styling done in the css document Anything that happens inside the canvas is not a matter of presentation. You're making an application that doesn't use HTML elements (aside from the canvas which acts as a "screen" to draw pixels on) so throw away all the HTML/CSS good practise ideas because they don't apply inside the canvas "world" Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.