Home/ Questions/Q 4027886
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T11:09:09+00:00

I have a canvas animation that sometimes redraws the exact same element over another

  • 0

I have a canvas animation that sometimes redraws the exact same element over another (it is a long story why this is necessary) but it happens, and it happens often enough.

Now I assumed that drawing an element (using a context path and the stroke method) over an existing exact replica of the image should do nothing at all to my animation. Instead it draws over the past image and blurs all the sides (as if it didn’t exactly draw at the same location.

The normal image without blurry sides

The image with blurry sides

Please let me know if there is a way to fix this

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is happening because canvas strokes are anti-aliased. In a practical sense you’re drawing some semi-opaque pixels over some other semi-opaque pixels, and where the pixels are overlaid their opacities are added together. I don’t think you can (currently) force the canvas object to turn off anti-aliasing on strokes, so you may just have to live with it. Is it that big of a problem?

    http://img813.imageshack.us/img813/303/canvasl.png

    EDIT: I guess you could try using PNGs with transparent backgrounds for your markers, instead of drawing them with strokes. https://developer.mozilla.org/en/Canvas_tutorial/Using_images

    • 0