I currently have text on a canvas that is white. I would like to be able to slowly and smoothly fill the text with another color (red) from left to right. Is there a way to do this so at times a letter will be white on a fraction and red on the other side?
An example using the word "Color".
The "Col" are red. The next "o" has 25% red (left) and 75% white (right). The "r" is full white.
Update
Thanks for all the help. I noticed it works even better if you add ctx.beginPath() before the clip object.
I have added a little bit to the idea and created a small js object that seems to work nicely for my current project. It may not be the most elegant js but hopefully it helps out someone else that wants to do this later. There is a slight issue I noticed with the size of text changing when it starts to fill, not sure why. http://jsfiddle.net/WRAFA/4/
You can do this whit the composite operation source-in. If you first draw your text with your background color (white) with composite operation source-over and then draws a colored-rect over it with soruce-in its only intersection between the text and rect that will be drawn. I made a small example at jsfiddle
Nice job on fixing Richard's fiddle. I've made a couple improvements.
you asked for a black canvas background with white text.
The use of setInterval is not recommended here. You are running draw for ever and ever and ever and ever and ever and.... I have fixed the fiddle to use setTimeout so that it stops the draw events as soon as you get to the edge of the canvas.
The adjusted fiddle is at http://jsfiddle.net/d4Jef/1/
One thing I would recommend, though. Instead of using compositing, you should write text using a clipping region. The problem with source-in compositing is that if your text were written over some kind of image with opaque pixels, then filling a rect over this would blow away your background. You got away with it here because you had nothing else on your canvas except the text. So it's better to go with a clipping region.
Here is the version with the clipping approach: http://jsfiddle.net/5ZgNz/2/
Note the use of the additional green square to highlight which this approach works in general.
How do I prevent a user from seeing a certain parts of the page. My goal was to make a huge maze within the browser (so big that the path is big as the width of the browswer screen); the user has to navigate using the scroll bar or any other scrolling method until they find the end of the maze. Making the maze is not the challenge, but to prevent the user from crossing over the boundaries is where I am having trouble.
My thought process is to make objects/areas on the page that block the user from continuing to move in that particular direction. Maybe the user can see 50px of the block/area before he can not go any further? I have never seen this done and I was curious to know if this is even possible.
Thanks in advance. Any help or advice will be appreciated.
Maybe that won’t be that answer you were looking for, but if you have some experience in graphics, you can try to use three.js library to generate the maze with canvas or webgl. You can use point light to lighten only small part of the maze. Other part can have something like “fog of war”.
If you are not interested in canvas/webgl, then you can try to use an overlay png image with transparent hole in it. Width and height of the image has to be screen.height*2 x screen.width*2 (not sure about that, but that is how I see it). That image should be on top of whole maze. It’ll hide whole maze except for that under transparent area. And your starting point should be in the center of that transparent area. Then you need to move that image along with user input (arrow keys, mouse, whatever). Alternatively, you can move maze itself. This way overlay image can have screen dimetions.
These are two option that came to my mind.
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.
Okay my last question got no response. I think I didn't ask the way I should do.
Basically my requirement is similar to this one Programmatically Clip/Cut image using Javascript
But following that link will result in a rectangle view of any portion of the image but I want to clip it any direction (polygon). Would that be possible?
There is not a good way to make an arbitrary polygon shape with the HTML 4 DOM. If you were using canvas I'd say you could do it that way. Your other option would be to just have a transparent png (and gif for IE6) on top and then the image underneath that and absolute positioned similarly to the other answer you referenced.
I had an idea for a WebOS, but it requires detecting drawn shapes. Ie: I want a user to be able to draw an image, then draw a big box around the whole image. Then the user can drag that box by the grabbing the border, and moving the whole image around. This requires that I be able to detect when such a box has been drawn, and turn it into a Rect type. Anyone have any pointers or tips on how to do this? I don't even know where to start.
There are Canvas functions for getting the pixels in a rectangle. But these functions do not work in IE (even with excanvas.js). Is that what you want to do?
You can attach mouse events to a Canvas, or to a div containing it.
If you could explain what you're trying to do exactly, I might be able to offer more help. If I understand you correctly, I think you could you what you're talking about if you don't care about Internet Explorer support.