Blur border of a canvas shape - javascript

How would I make a canvas shape go out of focus?
I've seen it done with webGl and I was hoping there was a way to do it with canvas and JS?
I want to be able to animate the amount of blur so I can't use an image.

You're going to want a Javascript library. Here's a good one for that purpose that allows you to pick an X,Y and width/height on the canvas to blur:
http://www.quasimondo.com/BoxBlurForCanvas/FastBlur.js
And here's the demo:
http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html

Related

html 5 canvas custom shapes without css

Is it possible in html5 canvas to create custom shape canvas like circle, star, rounded corners etc. What I'm talking about here is the main canvas itself not the contents. I already searched for answers and results are by using css. By default canvas is rectangle I want to make it custom shape. I hope this is possible.
Thanks

Dynamic resize of canvas and its contents

i'm a beginner in Javascript so please bear with me.
Basically I'm making a sandbox drawing facility for a website using Javascript. And this is done using the canvas. What I need to do is to be able to resize the canvas dynamically but at the same time keep everything on the canvas to scale.
I don't think this question has been asked before. It seems trivial but I currently have all my objects on the canvas defined in absolute coordinates. I also have mouse events to use to draw things. And when I want to enlarge the canvas (by doubling the size say). All the objects inside won't be enlarged properly to scale and the mouse coordinate system would be messed up too.
Only solution i can think of is add a scale factor to ALL my drawing parts, but this is very tricky with a lot of code. Is there a better way?
If you don't mind jaggies on your double-sized canvas drawings then you can simply use CSS to double-size your canvas. Then divide every incoming mouseEvent coordinate by 2.
If you don't want jaggies on your double-sized canvas then:
Double-size the canvas element: canvas.width*=2 and canvas.height*=2 This automatically erases all canvas content.
Scale up the canvas: context.scale(2,2)
Redraw all your drawing parts using the unchanged original coordinates. A happy note: you do not have to scale any of your drawing coordinates -- context.scale automatically does that for you.
Divide every incoming mouseEvent coordinate by 2.

Is there a way to make a circular image in HTML using Canvas or other Method?

I know that the canvas element can look like a circle using the CSS border-radius property. However, if you draw something using the canvas API, and then right-click to "Save as Image", when saved, the image is still a rectangle (as if the border-radius was not applied). Is there a way to actually save the correct image?
All image formats that I know of yield rectangles.
You could draw a circle on a canvas with the outside of the circle being transparent. That would visually look like a circle rather than a rectangle.
When css applies, it does not really transform the image except visually. So, you would need a bit more than simple css. The issue is discussed here where what you want is achieved using javascript:
Save canvas image after css applied
Capture and save an image with css effects applied
Hope this helps.

Creating an X-ray vision effect on an image HTML5 [duplicate]

If I change the cursor of a page into a 'flashlight' (say, a circle), and I want to reveal an image only when passing the light (the circle) over it, what would be the best way to go about this? Using css clip? But then it can only do rectangles, so I'd have to use canvas? Perhaps there's an easy way to intersect the two images?
You can do this with a canvas easily.
Here's an example:
http://jsfiddle.net/gfZ5C/
On every mouse move, we clear the canvas, redraw the image, make a clipping region that is a circle cut out of a rectangle, and draw black on the entire canvas (which will draw only on the clipping region)
Make sense?
There are a lot of ways to achieve this effect and similar effects. You can also make much fancier light sources with a bit of canvas sorcery. See for instance my answer here: Canvas - Fill a rectangle in all areas that are fully transparent

Setting a transparent color in HTML5

Is it possible to set a transparent color for images loaded in HTML5?
I would be looking for something similar to the setColorKey() function available in SDL. This would be used to easily remove a background from some sprite sheets that I will be using.
There is no very straightforward way to do this, but you can use the <canvas> tag to do this.
Draw your image in the canvas, using drawImage, and then use getImageData and putImageData to perform pixel manipulation on it.
There are some examples of pixel manipulation in canvas here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
There is no built in function for this. If this doesn't need to be dynamic, then you could remove the color from the original image and make those areas transparent. Then you put the images in a div that has the background color that you just removed from the image. After that you change the background color of the div when you mouse over the image.
If that sound like the right idea and you need some starter code let me know.

Categories