I saw a very interesting canvas technique on the site http://capitolcouture.pn/ when clicking on Issue 1. This flower/circle Effect.
I'm quite familiar with the canvas element drawing diagrams and so on, but I'm not able to examine how the transparent circle is created and put over the second canvas with text.
EDIT
Because of the tip, that people don't follow links from stackoverflow beginners I try to explain the effect.
You have 2 canvas elements.
One is lying on top of the other.
The canvas lying below the first one contains some text.
If one hovers over the top canvas, a certain radius around the mousepointer gets transparent cleared on the second canvas.
On this mouse hover, the first canvas spawns graphics corresponding to the second ones text letters.
Any suggestions?
Related
I'm working with svg files and some processing.js code to create a homepage.
It has some animation and static elements but the idea is to have everything the same but with different colours - Like an alternative homepage. I want this alternative to "peek" through as the mouse moves around. Only a small area around the mouse.
Does anyone have any idea how to do that?
since it isn't an image file it's a bit tricky.
I tried doing it by using the an image and the "drawing" element of processing.js thinking it could paint the alternative homepage, however it repeats the image everywhere the mouse go and what i want is for everything to remain in the same position only show the different colours in that spot.
You might consider superimposing two versions of your site, the "top" one completely covering the "bottom" one (make sure all backgrounds are opaque). Then you could try applying an SVG mask to the top page, making it transparent at a specific area and causing the bottom page to shine through. You could modify the mask as the mouse moves.
The other way round - i.e. clipping the top layer - is also thinkable.
I see the risk that this approach is slow and not consistent across browsers - you'd have to give it a try. Speed may differ depending on whether you clip/mask the top or the bottom layer.
W3C SVG Clipping, Masking and Compositing specs
MDN page on clipping and masking
MDN page on applying SVG effects to HTML content
If one version of the page can be converted to other by swapping out colors, SVG filters might be an option as well.
I am trying to draw some guide lines via fabric.js like the online editor app on printio.ru.
So far, I placed 2 canvases with the same size in one page, the top one is to be a static workcanvas which used to draw some guide lines and the bottom canvas will contain some interactive objects. This seems to be how they do it in the page on the link above.
However, I can't work with those objects on the bottom canvas because the top canvas interrupts mouse events. Is there a way to let the mouse events to pass through to the bottom canvas? I am thinking of something like canvas.mouseenabled=false on the top canvas - is that possible?
I have thought of an alternative solution: place the guide lines and other objects in one single canvas. I don't like that solution because it adds things that I don't want to the bottom canvas and, in that case, I have to add some line instances instead of just draw line by context2d, which I think will give me low performance
Apply css-property
pointer-events:none
to upper elements, mouse events can through.
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
It will be work for modern browser.
http://caniuse.com/#feat=pointer-events
I am not sure if it is possible. But let's say there are two images, one over another. Then I will have a circle size 100px around my cursor. So when I move the cursor over the image, it shows part of image that is under the front image. So the back image is hidden and visible only if the circle size 100px is over some part of it.
Unfortunately I have no code as I am not sure if it is possible to create.
However, any idea about it?
I would try actually stacking the hidden image above the visible one, then use HTML5's canvas to track your mouse cursor, clip a circular area underneath your cursor, then draw your image above it. This gives the illusion that you're "revealing" an underlying image, when in fact you're really revealing a small portion of an image stacked on top. Repeat this any time the user moves his/her cursor.
Here are some resources you might find useful in coding this:
HTML5 Canvas Clipping Region Tutorial
HTML5 Canvas Mouse Coordinates
Stack Overflow: clearing circular regions from HTML5 Canvas
I am experimenting with HTML5 Canvases in an attempt to create some animation. My ultimate goal is to be able to animate a box to a particular location at whim, for now im just animating it across the screen. When I move it across the screen I geta black trail left behind, how do I clear this "dirty" section without removing the background grid?
A jsFiddle of the code is here
Two solutions
Redraw the background on the top of animation before moving it to the new location. This so called dirty sprite technique - faster - more complex.
Redraw the whole canvas between frames
If drawing the background is a complex operation just hold a prepared background buffered in another canvas for speed.
You have to clear what you've drawn if you don't want it to be visible. I assume you don't want to clear entire canvas to avoid redrawing grid and spending CPU cycles. You'll have to do this differently.
Possible solutions:
have two same onscreen canvases one over the other. Draw grid on canvas below and don't clear it. Clear part of top canvas and redraw on it.
have one on-screen and one off-screen canvas. Draw grid on off-screen canvas. Each time you animate, clear whole on-screen canvas, copy prepared grid from other one, and draw what you need over it.
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.