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.
Related
I'm trying to create an image editor that can mask personal identifiable information. We're using konva right now to add black Rect shapes over images, but we would love to use the blur or even pixelate feature. Im not sure I'm going about this right, can anyone help me out? Here's a sandbox
UPDATE
Ok I was able to figure it out. Instead of trying to blur a transparent Rect shape on top of an image (which will just blur the transparent Rect, not the image behind it), I needed to get a little more clever with how this worked. My solution was to keep the original image as is. Keep the black rectangular shapes working the same way, but change their fill to transparent and set a stroke color only while they were selected. These will act as a way for us to set and interact with the redacted parts. Then for each shape that was created, I created a new full-size and blurred version of the image layered on top of the original image with a parent Group that had a clip path set to the bounds of the shape.
Here's a link to the updated sandbox
It's not 100% perfect, for some reason the selection is behaving a little funny (it's working alright in our production app ¯\_(ツ)_/¯). But hopefully this is a solid enough ground for anyone else to get up and running with a redaction tool!
Would love to see if anyone has any suggestions for improvement!
I have a canvas with white background. So when I want to clear it, is there a difference between using
clearRect();
fillStyle="#FFFFFF";
fillRect();
and
fillStyle="#FFFFFF";
fillRect();
Is using any of them considered a better practice or has an effect on the outcome of getImageData()?
If you don't clear it first, you'll be drawing on top of what was previously there. If you not using any transparencies, maybe this is OK.
Another difference is that clearRect() doesn't use a white background. it uses a transparent one.
I modified a very complicated animated grass example found here and checked a few other examples. I want to make something very similar to this but less complicated code. safari is on its knees trying to render this... also I had to use css transforms to get it to hang from the top of the browser window as desired.
http://yak.is/hairy/
if someone could just explain the basics. I'm lost trying to comprehend the code I hacked.
here's another one I tried:
http://yak.is/hairy/2.html
the shape isn't very hair-like at all, but I do like the simplicity and the cursor input.
basically:
need to draw a realistic-looking amount of hair/fur across the top of the screen (updating canvas width to window width and drawing the correct density of lines) and give them a natural-looking automatic "sway" in the wind.
each line will bend a little bit from cursor input.
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?
I have big horizontal strip image in photoshop which is made of lots of smaller elements. The background is transparent and the strip goes from smaller elements (left) to bigger elements (right). My goal is to make this strip interactive to mouse events.
Each element is some kind of polygonal image which is trimmed left and right and then exported as a png. It is then imported into a canvas.
The problem is that I can put them side by side but since they are not rectangles I need a way to calculate the offset made up by the transparent pixels on each side of each element to make them stick together correctly... I am using KineticJs to get a precise hitarea for each element... So maybe there is a way to do it automatically with kineticjs,or there is some kind of operation I could do using each image data?
My problem illustrated:
Any ideas?
Also I am doing this simply because I would prefer precise mouseOver bounding box on each item (rather than a simple rectangle) and would rather avoid the solution to calculate each offset manually... But maybe that's not worth it?!
Ok, so you have yourself a custom shape you want to use, here is a tutorial for that: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ , the simplest thing you can do, and even that seems fairly long, is to calculate the bounding lines for that shape. (Two somewhat vertical lines, and two somewhat horizontal lines). Then you test if the right vertical line of shape one crosses with the left vertical line of shape two, if they do, then set the coordinates of the images to be the same coordinate.
http://www.mathopenref.com/coordintersection.html
line1 = ax + b ..... line2 = cx+d //see possible tests
if(...intersection test...){ // or just test if some coordinate is left of some other coordinate
shape2.setX(shape1.getX()+shape1.getWidth()); //account for image width, so they don't overlap
shape2.setY(shape1.getY()) // no need to account for height
}
UPDATE: This is a very rough solution to the workings of the problem. The next step would be to do more fine tuning dependent on each image.
http://jsfiddle.net/9jkr7/15/
If you want precise areas, use an image map. With some clever finagling and a blank image gif you should be able to have the background you want whenever you hover over any particular area of the image map (might require javascript).
The other option I can think of would be to use SVG itself or one of the many libraries in existance to build interactive vector graphics into your page.
You could also write a function that calculates the left most, top most, right most, and bottom most pixel by looking at all of the pixels in the image data. Here's a tutorial on that:
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/