Jump to content
Sign in to follow this  
bloodaxe

oval circles

Recommended Posts

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

Share this post


Link to post
Share on other sites

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites
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"

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...