-1

CSS:

canvas {
    max-width: 100%;
    }

HTML:

<canvas id="Spades" width="240" height="320" style="background-color:white;border-radius:10px">

The above css is not working in IE10, height is replaced with the width i supply. Any help is appricited

1 Answer 1

0

Are you trying to resize the canvas to full page size?

Your max-width is only used to define a theoretical maximum width of the canvas, not to cause the canvas to be resized.

Anyway...

Don't use CSS to resize the canvas because your canvas drawings will be distorted. That's because the browser responds to a css canvas resizing by "stretching" the existing canvas pixels.

Instead, resize in javascript by setting the width of the canvas element itself.

var canvas = document.getElementById('myCanvas'),
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.