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.
Related
The image is 30px high. I downloaded the images with the lowest resolution I found and with a good quality. However, they are blurry.
I put a hover animation and when I move the mouse, in the time that the animation occurs it defaults and then becomes blurry again.
Is there any way to solve this ??
You could download SVG version of it
Using AS3 to take a picture with the iOS camera. I have it all working, but my picture is ALWAYS landscape. I have the app set to portrait and take the picture with the IMAGE MediaType, which is also in Portrait mode when I take the picture.
Any ideas? Should I just scale and rotate accordingly or is there something to get around this?
Also- if anyone has a small demo of painting on BitmapData/pictures taken that would be appreciated as well :)
Cheers.
To solve this issue I simple just checked the width and height of the image, rotated and scaled accordingly.
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
I am working on an infographic with sliding carousel <li>s, but the SVG is showing up pixelated in Firefox, even though the bug with SVGs in FF has been resolved, I thought. Can anyone see a fix for this?
URL: http://weaver-wp.weavertest.com/radiation-infographic/
You are zooming your SVG file to a very large size:
background-size: 9730px 30000px;
background-position: -7310px -29250px;
Most browsers will not antialias very large SVG shapes, as it requires too much graphics memory. (This is what we see in Safari and Chrome.) It looks like Firefox is actually rendering the SVG to the size of the canvas and then blowing it up with image interpolation to your cropped region.
The fix for both is the same:
Crop your SVG first and use just the cropped portion as a background.
Use the viewbox property of the element when panning/zoooming. It is much higher performance and simpler to use.
On this test page: http:// www.onebagoneearth.com/ Products-test , where it says "oboe love series", "oboe kind series", etc, when you hover over that text (which is a background-image) in IE7 and IE8(at least on Vista, and also with IETester), the image blurs (not just by being opaque though...that would be the normal hover effect). Why is that?
The same thing doesn't happen on this page with similar CSS: http:// www.onebagoneearth.com /Products . If it's the zoom:1 bit of CSS, I don't understand why it would do that on one page and not the other.
I see what you mean, but on my computer it doesn't blur, it gets a noisy outline of dark gray pixels instead.
It's because you are using a PNG image with an alpha channel, and are applying a filter to it. Internet Explorer doesn't handle this correctly and draws the semi transparent pixels against a solid background instead of the actual background.
When this happens and how it appears exactly may vary from computer to computer, and even on the same computer in different situations. That's why some people experience it and some don't.