CODEWITHSUNDEEP
javascripthtmlcanvashtml5-canvas
RareNCool
RareNCool

Reputation: 436

DrawImage doesn't show CSS styles

I'm trying to draw an img to a canvas. However, styles aren't carrying over, whether I set the style attribute or do it in the CSS. Here's a JSFiddle showing what I'm trying to do.

I've also tried applying the styles to the canvas itself. This displays correctly, but when I perform canvas.toDataURL(...) it doesn't get the styles.

Is there some other way to apply styles to the generated data?

Upvotes: 2

Views: 523

Answers (1)

apsillers
apsillers

Reputation: 115970

To apply filters to your canvas content, you can use the cutting-edge filter property, which uses the same syntax the CSS filter property. Before you draw your image, do

context.filter = "grayscale(1)";

And you can reset it for anything else you do in the future by

 context.filter = "none";

Your filtered image will remain correctly filtered -- the filter property basically tells the canvas context, "Whatever I draw from now on should have this filter applied," so changes only affect future drawing operations.

Upvotes: 3

Related Questions