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
Related
I'm creating an arcade game using Javascript that draws to a 2D Canvas context.
To simulate 'pain' in sprites that have been shot I want to have them flash orange.
I currently draw the image to the canvas using ctx.drawImage().
Rather than create more artwork to apply the 'in pain' effect I'd like to use Javascript.
I've researched globalCompositeOperation but as yet can't find a solution.
Here is the original image drawn to the canvas over the scrolling background graphic:
In theory I'd like to then apply a rectangular orange area using fillRect():
The effect that I'm after is this:
Not this:
Does anybody know if this is possible?
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.
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
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
I know you can layer canvases on top of each other just as if you were making an image in Photoshop but are you able put canvas objects above and below each other or side-by-side?
I'm looking to draw a graph which allows you to choose a space and depending on what color choice you have it'll change the block based on that choice.
Here's my thought:
Canvas #1 - Draw Graph Paper
Canvas #2 - Right side of Canvas #1 - Tab that has 4 color choices. I'd figure out the x-y of these to grab the color based on the color image. Canvas 1 block color would reflect this choice.
Is this a good way of going about this implementation?
Yes you can place canvases above, below and side-by-side each other. A canvas is an HTML element and can be positioned like any other using CSS.
I'd probably try to avoid using a canvas for your color choice tab unless it's absolutely necessary for some reason you haven't mentioned. If you use standard DOM elements instead you'll be able to bind to the click event directly rather than having to figure out the mouse position relative to graphics in your canvas.
Here are some good reasons not to use canvas to create UI components.