What I want to do is go beyond simple image masking (nothing to do with text image masking). I know about canvas masking a vector shape, and rectangle clipping, but what if we want to use a black and white opacity map like a photoshop mask. Is it possible with html5 / css3? Is there a way to do it with canvas tag that I just haven't realized?
There are only a few ways to mask an image right now. Webkit has -webkit-mask, while in Firefox, Mozilla prefers you to use an SVG mask to mask an image.
Here is an article on canvas masking
Related
I was experimenting with bitmaps and created an alpha mask. When i test the program in full screen, it works fine however when I re-size the screen, the bitmap alpha masks doesn't seem to scale correctly. Below are illustrations of my issue. The bitmap alpha mask is shown as a purple background for visibility, and the blue portion is where the bitmap is completely transparent.
Full Screen (Looks Good)
Regular Screen (Looks like the mask is shifted to the left):
Why is this happening and what can i do to fix it?
Thank you.
It turns out the text box Anti-aliasing was the problem. I changed the ani-aliasing from "Anti-alias for readability" to "Anti-alias for animation" and now everything scales properly.
I have a GIF picture with transparency. When I place the picture in a regular HTML the transparency shows fine. But when I load the same picture as a logo in a PHP software, the picture doesn't show the transparency but a white background.
The only strange thing I find in the page on which I load the picture which doesn't show the transparency, it has a gradient color background in CSS. I don't know if it's related to the problem or not.
What reason could there be that the GIF shows the transparency in some pages and in other pages it doesn't? Whatever the reason is, what can I do to make it work where I need it?
what can I do to make it work where I need it?
I would use a .png instead a .gif as logo you will probably load it through css
(background: url(path/.png) no-repeat; , I know it does not answer the why but solves the issue for sure.
If a .png is too big in your opinion use the online great tool it uses even advanced lossy compression for PNG images and preserves full alpha transparency
When I add a 775 x 775 image to a fabricjs canvas and resize it down to around 90 x 90, the image greatly loses its quality.
But if I add that same image as an <img/> and scale it down, it retains its quality.
Why does the canvas image become so low quality? How can I make the canvas image retain it's original quality like the <img/> does?
It should probably go for a comment, but unfortunately I am new here and I can't add comments.
However, to me it looks like antialiasing issue. Canvas is just bunch of pixels - it's up to you whether you do some antialiasing or not. Browsers however do some antialiasing on picture scaling (see here Disable antialising when scaling images).
This question might be a duplicate of:
Html5 canvas drawImage: how to apply antialiasing
HTML5 Canvas and Anti-aliasing
Hope it helps.
I am trying to mask dynamically sized images on a webpage. The SVG mask I use for Chrome and Safari with their webkit-mask-box-image work great by resizing the mask to fit the element I'm using which in this case is an image. Is there any thing that is similar to webkit-mask-box-image for Gecko-baised browsers?
Have you seen this html5rocks article? http://www.html5rocks.com/en/tutorials/masking/adobe/
Regardless, I think the best cross-browser solution for masks is canvas.
I'm using an SVG object embedded in HTML using the tag. The SVG gets painted with a white background. How can I get rid of it and make the element transparent so that the HTML background shows through.
There is supposed to be a way to do this in IE with Adobe's SVG viewer using the wmode attribute. How do I do this in WebKit or Mozilla?
Only webkit-based browsers fail to use a transparent background for <object> elements that reference svg in my experience. See for example the upper-right corner svg on my experimental site, http://dahlström.net/. Opera and Firefox work just fine without anything special needed, just view source and see.
Have a look at A List Apart's article on SVG backgrounds.