bloodaxe Posted July 15, 2014 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 Link to comment Share on other sites More sharing options...
davej Posted July 16, 2014 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> Link to comment Share on other sites More sharing options...
bloodaxe Posted July 16, 2014 Author 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. Link to comment Share on other sites More sharing options...
davej Posted July 16, 2014 Share Posted July 16, 2014 I don't see the problem. Link to comment Share on other sites More sharing options...
Hadien Posted July 17, 2014 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). Link to comment Share on other sites More sharing options...
bloodaxe Posted July 17, 2014 Author 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. Link to comment Share on other sites More sharing options...
Ingolme Posted July 18, 2014 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" Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now