I'm new in drawing with HTML5 canvas, now, I've done the following demo:
https://dl.dropbox.com/u/4423757/demo2Canvas.html
so here are my questions:
How can I make disappear the red lines in the silver shadow?
Should use SVG in this case?
Thanks!
You should not use SVG because it is much harder to make animations and SVG is not even efficient for that.
About the main problem, I couldn't solve it but I think that it is caused due to the fact that the shadows are being drawn in exactly the same place has the "155%" are. So to solve this, assuming I'm correct, the shadows need to be thicker.
Related
My goal is to create a curved arrow like this one, on an html5 canvas:
I have found several resources on how to draw lines but none of them seem to work. I also found a related stackoverflow post.
Also, is it possible to animate it on hover in order to expand the arrow, using an elastic effect maybe?
Raphael and canvas both have some limitations when it comes to drawing lines in a pen-on-paper style. I've found the best way to simulate such a thing is to iteratively transform a 1-pixel path into a target path, as in this fiddle: http://jsfiddle.net/zPRha/31/ With a little work, you could calculate the angle between the last two points along the path and transform/rotate an arrow path to match the line as it is drawn. It's not an ideal solution, but it would work.
Raphael's built in hover support makes zooming/unzooming extremely easy. My understand is that such handling would be rather more obtuse using canvas natively, though I'm sure some canvas libraries have automated away this concern.
Here is an updated fiddle with optional support for an arrow: http://jsfiddle.net/kevindivdbyzero/JPqXF/
I think you should use SVG with CSS3 transitions to do this kind of stuff.
I'm new to canvas, so pardon the beginner question. I'm trying to animate a square on a canvas that changes colors, rotates, and scales up and down (this is just for practice). I'm just trying to grasp all of the concepts and create an example that does all of them at once.
What I want it to do is scale up to a certain amount, then once it reaches that amount, it scales back down to the beginning amount (and then repeats). The same goes for the color (continue animating, then go backwards through the colors). How can I accomplish this?
Here's an example of my code that I wrote:
http://jsfiddle.net/ggsFJ/1/
You'll notice a couple bugs:
Once the color gets to yellow, it stops animating.
The scaling obviously doesn't work.
The rotation isn't either clearing the canvas fast enough or something, because it's showing a trail of positions.
Where can I find some resources on accomplishing this? Any help is appreciated.
There's one small problem that's causing all the other problems (well, apart from the yellow - I'm not experiencing that particular one):
ctx.restore;
That line does nothing. You need to call ctx.restore using parentheses. Once you do that, the scaling works, and clearRect() will clear a non-transformed rectangle:
ctx.restore();
And here's the updated demo.
The problem I can see is with your restore method call.
You are just saying ctx.restore (possibly by mistake). It should be ctx.restore();
Is it possible to wrap text around a non rectangular image?
I want text around maps of different countries to wrap around the country's shape in such a way that the text always keeps the same distance from the country's border even though the border itself isn't straight.
Is this possible?
You can use this method, where you float divs to block off the shape's area.
So - the answer is "Yes - it can be done". But as far as I know there's no "easy" way like a CSS "text-wrap" option.
It looks like that kind of support is on the horizon.
As Dave said, there is CSSTextWrapper, which is probably the best way to do it at the moment, but a relatively recent W3C working draft outlines a method to use more complex shapes using SVGs, and perhaps raster images with outline detection.
How long it will take for it to be implemented in major browsers, let alone finished, is anyone's guess.
At the moment, it can be done, with difficulty. With luck, it will be much easier in the future.
There's a jQuery plugin called Bagon designed to do exactly this.
As others have already said: yes, it's possible... but it's not so difficult.
Customers tend to like this kind or wrapping, at the end I made a script for it: http://www.miguel-svq.com/textwrap.html
This can use floating divs or slice the image, as you prefer.
There's the well-supported shape-outside CSS property. You can even just give it the PNG and it'll figure out the shape from the alpha channel.
this.context.drawImage(myimage, 0, 0);
Putting the image on the canvas is pretty well covered all over the web.
But how do I remove it after it's there?
Canvas is an immediate drawing surface. This means that you execute a command on it (drawImage or fillRect) and it does that command, and it doesn't give a damn what has just done. There is no undoing of something.
You had a hard time searching for it because there's no such thing as "removing" for a Canvas. All it knows is that it has some pixels of some color from somewhere. It has no idea where.
To simplify a bit, there are generally two ways:
Clear the entire canvas, and draw everything all over again EXCEPT the one image you do not want drawn
Use two canvases, one that only has the image and one with all the other stuff. Clear this canvas with clearRect(0,0,width,height) and you're done.
You'll notice in 1. that you will probably have to start keeping track of the things that you draw on canvas if you want some of them selectively removed or repositioned. Instilling object persistence, or rather turning canvas from an immediate drawing surface to a retained drawing surface, is something that a lot of canvas libraries do. If you want to do it yourself, I've written a few tutorails to help people get started.
If you want to look into libraries, take a peek at easel.js. It's pretty learnable.
Option 1:
Draw a rectangle over it of the same color as the background.
Option 2 (works for non-trivial background, but slower):
Get the pixel data from the canvas before drawing the image, then redraw that pixel data to remove the image.
So I came up with a quick and easy way to clear my canvas. I just put my <canvas> tags in between <p> tags with an Id, then each time i needed my canvas cleared I just rerendered my <p> tags by changing the innerHTML, works like a charm.
I have this problem while drawing a square in canvas, made out of two triangles.
There is a whitespace between the two fills of the triangles:
http://cl.ly/71AB/Schermafbeelding_2011-05-24_om_16.52.53.png
Watch closely!
How do I solve this without placing the two triangles closer together?
Its an anti-aliasing issue with some browsers. For instance this persepctive demo will draw without such white lines in Chrome but will have the ugly white lines in Firefox, because the two browsers decided to do anti-aliasing differently.
Because of this, some things look nice in Chrome and not FireFox, and vice versa.
There are a few hackish ways to attempt to solve your problem. In this very specific instance, you could draw a black line between the two triangles.
edit: For semi-alpha'd shapes, you will have to change the globalCompositeOperation of the drawn line. Here is an example: jsfiddle.net/rqd8f
A blurring algorithm would help, but per-pixel operations on canvas are slow.
If you are using clipping regions, expand them.