Planet, Moon and a Clipping Arc in Canvas - Rough Edges - javascript

So I have a rotating canvas element which has an arc drawn inside it (the smaller planet):
http://jsfiddle.net/neuroflux/9L689/4/ (updated)
But I can't seem to get the anti-aliasing on the edges of the smaller planet smoother - any ideas?
Cheers!
edit: is there a way to increase the number of iterations used within an arc?

Your problem is not that the arc doesn't have enough points, but that in Chrome the .clip() operation doesn't use anti-aliasing to produce the clipping path.
See Chromium Issues 7508 and 132442
To see this in action, look at http://jsfiddle.net/alnitak/YMtdZ/ in Chrome.
markup:
<canvas id="c" width="600" height="300" />
​
code:
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.save();
ctx.beginPath();
ctx.arc(150, 150, 140, 0, 2 * Math.PI);
ctx.clip();
ctx.fillRect(0, 0, 600, 300);
ctx.restore();
ctx.beginPath();
ctx.arc(450, 150, 140, 0, 2 * Math.PI);
ctx.closePath();
ctx.fill();
​The left-hand circle is drawn with clipping, and is aliased. The right-hand circle is drawn "normally", and is anti-aliased.
FWIW, in Firefox and Safari both images look the same. I can't test it on IE.
The only work around I can imagine (until Chrome gets fixed) would be to render the image off-screen into a canvas 3 or 4 times larger, and then copy that with down-sampling into the displayed canvas.

Related

How to "paint" on an image on Canvas?

I want to use an image like this on canvas:
The user will "paint and fill" the image, but not on top of the outline.
The problem is:
If I put behind the canvas, the paint will cover the outline.
If I put over the canvas the image block canvas interaction.
Can you help me guys?
Use compositing mode "destination-over" to draw behind existing content (from image, vectors etc.). It's necessary that the existing content provide an alpha channel or composition won't work. If there is no alpha-channel you can convert inverse luma / matte (the white) to alpha channel.
// a quick-n-dirty demo
var ctx = c.getContext("2d");
ctx.lineWidth = 10;
ctx.moveTo(100, 0); ctx.lineTo(150, 150); ctx.stroke();
ctx.fillStyle = "#09f";
// KEY: composite mode -
ctx.globalCompositeOperation = "destination-over";
// draw behind the line
c.onmousemove = function(e) {
ctx.fillRect(e.clientX - 10, e.clientY - 10, 20, 20);
};
body {margin:0}
canvas {border:#777 solid 1px}
<canvas id="c"></canvas>
Here is the example of drawImage function. You can draw any preloaded image onto canvas. You can also try to place the <img> overlay in front of the canvas and disable mouse events for it using pointer-events: none CSS property.

HTML Canvas scales along x axis? (Using Internet Explorer)

I am drawing on a canvas object using JavaScript and somehow Internet Explorer (don't ask, I have to), Version 11 scales the drawings along the x axis.
Here is the JavaScript code:
var c = document.getElementById('canvas1');
var ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(50, 50, 50, 0, 2 * Math.PI);
ctx.fillStyle = '#000000';
ctx.lineWidth = 5;
ctx.stroke();
You would expect a circle to appear. But instead I get an Ellipse:
(Don't mind the horizontal line on the left, that just the surrounding div. The canvas is the small square.)
EDIT: The size of the canvas is 100 x 100.
Following the comments the answer is to set height and width of the canvas object as attributes of the canvas-tag. Like this:
<canvas height="200" width="400"></canvas>
See this post for further explanation.

How can I "colour" specific part of the screen using coordinates?

I'm just started working with Leap Motion (it is so much fun). The Leap works mainly with vectors. And now I want to create a program where I can visualise where is a vector pointing. The only way I can imagine doing this is by using a small image which appears when this fuction is on and positioning by using the img.style.left , img.style.top instructions. Any other ideas?
If your goal is to represent 2D Vectors,
You can use canvas to draw lines.
A canvas is like a div but you can draw whatever you want in it, I don't know anything about Leap Motion but if you want to draw lines and circles at precise coordinates, it may be a good solution instead of working with the DOM itself.
The JS part looks like this :
var canvas = document.getElementById('my-canvas');
var ctx = canvas.getContext('2d');
//For exemple here is how to draw a rectangle
//fillStyle support all valid css color
ctx.fillStyle = "rgba(50, 255, 24, 0.7)";
//Create the rectangle, with (startX, startY, height, width)
ctx.fillRect(20, 15, 50, 50);
ctx.beginPath(); //Tells canvas we want to draw
ctx.moveTo(250,250); //Moves the cursor to the coordinates (250, 250);
ctx.lineTo(75, 84); //Draws a line from the cursor (250, 250) to (75, 84);
ctx.closePath(); //Tells canvas to 'close' the drawing
ctx.strokeStyle = "red";
ctx.stroke(); //Draws the line stroke
And the HTML is simply :
<canvas id="my-canvas" height="500px" width="500px">
Here is the text displayed when the browser doesnt support canvas.
</canvas>
I made a jsfiddle to show you what simple things we can do with canvas.
http://jsfiddle.net/pq8g0bf0/1/
A nice website to learn canvas : http://www.html5canvastutorials.com/tutorials/html5-canvas-element/
Since it's javascript, you are free to do calculations for your vectors coordinates, addding eventListeners etc ...

Workaround for Chrome arc path fill bug?

EDIT: This bug was fixed in version 38.
A recent version of Chrome introduced an issue in an application I maintain. I'm not sure if this is one of those weird "seems wrong but is actually correct" issues or if it's an honest-to-god bug, but it only presents in recent versions of Chrome (it started happening about a month ago, I'm not sure exactly which version introduced it)
The bug presents when using the context fill() method on certain paths that are drawn using the context arc() method. Rather than drawing a filled arc, what is filled is an oddly-shaped polygon.
Here's a demonstration of what I mean -- the shape in the upper right should be a filled arc:
var ctx = document.getElementById('cvs').getContext('2d');
// draw stroked arc
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI/2);
ctx.lineTo(125, 125);
ctx.closePath();
ctx.stroke();
// draw filled arc
ctx.beginPath();
ctx.arc(225, 75, 50, 0, Math.PI/2);
ctx.lineTo(275, 125);
ctx.closePath();
ctx.fill();
// draw stroked triangle
ctx.beginPath();
ctx.moveTo(125, 225);
ctx.lineTo(75, 275);
ctx.lineTo(125, 275);
ctx.closePath();
ctx.stroke();
// draw filled triangle
ctx.beginPath();
ctx.moveTo(275, 225);
ctx.lineTo(225, 275);
ctx.lineTo(275, 275);
ctx.closePath();
ctx.fill();
<div><canvas id="cvs" width="300" height="300" style="border: solid black 1px"></canvas></div>
My question is this: is there a workaround for this issue? Preferably one that doesn't require me to write my own filled-arc renderer.
I do see this bug on Chrome 37.0.2062.124 on OS X. This may or may not be related to the bug described here, which is supposedly to be fixed in Chrome 38.
As a workaround, rotating a few degrees and immediately rotating it back before filling the arc seems to work.
// draw filled arc
ctx.beginPath();
ctx.arc(225, 75, 50, 0, Math.PI/2);
ctx.lineTo(275, 125);
ctx.closePath();
ctx.rotate(1*Math.PI/180); // Rotate 1 degree
ctx.rotate(-1*Math.PI/180); // Reverse rotation
ctx.fill();
Here's a fiddle demonstrating the workaround: http://jsfiddle.net/ejacpd1w/1/

HTML Canvas draw arc between two points

I have found similar questions out there, but no answer. I have sketched a circle like so
ctx.strokeStyle='rgb(0,0,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI*2,true);
ctx.closePath();
ctx.stroke();
which gives a circle situated at (100,100) with radius 45, plus 5 for the linewidth, making it a circle of radius 50. Now, I want to sketch the exact same circle, but another color, and only 1/4 of the original circumfrance (think the XBOX 360 red ring of doom). So I tried this
ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true); //use 1/4 of original angle
ctx.closePath();
ctx.stroke();
But that has the really annoying aspect of connecting the first and last points (sometimes I wonder who created the canvas element, like when embedding text, but don't get me started on that...)
I've commented out the line you don't want. By calling closePath(), you are closing the path of your arc.
Example
JavaScript
ctx.strokeStyle='rgb(0,250,0)';
ctx.lineWidth=10;
ctx.beginPath();
ctx.arc(100,100,45,0,Math.PI/2,true); //use 1/4 of original angle
//ctx.closePath();
ctx.stroke();
jsFiddle.

Categories

Resources