jQuery not changing width

Question

Here is my code, I feel like I have tried everything but nothing is affecting the canvas. I have been researching for the last hour and I tried just plain javascript, but for some reason the canvas is not changing. This same code works for an iframe on a different page.

<canvas id="canvas" height="400" width="400"></canvas>
<script type="text/javascript">
$(document).ready(function () {
        $("#canvas").attr('width', 800);
    });
</script>

What I want to do is set the width equal to the window size minus 100 px, but right now I have it set as 800 so I can try to figure out why this is not working.

You have included jQuery somewhere right? The code works fine for me... using $("#canvas").attr('width,800); instead of $("canvas").width(800). (This second command did resize the canvas, it just also maintained the original aspect ratio, so the resized canvas was 800 by 800). — alpacahaircut
– alpacahaircut, Commented Dec 8, 2013 at 3:41

Zarathuztra · Accepted Answer · 2013-12-08 03:23:27Z

6

You have to redraw the canvas once you've resized it. First, grab the 2d context with getContext('2d'), then call the necessary functions on the context, most likely strokeRect()

var myCanvas = $('#canvas').attr('width',800);
var myContext = myCanvas.getContext('2d');
myContext.strokeRect(0,0,myCanvas.attr('width'),myCanvas.attr('height'));

I think that's right, but there could be some code errors, hopefully you get the idea.

answered Dec 8, 2013 at 3:23

Zarathuztra

3,2411 gold badge23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ram Over a year ago

Off-topic, is your username related to Zarathustra?

Michael St Clair Over a year ago

Thanks, all I had to do was put it before the chart was drawn by the script

Comfortably Numb · Accepted Answer · 2013-12-08 03:22:08Z

1

How about this:

#canvas {
    width:400px;
    height:400px;
}

<canvas id="canvas"></canvas>

<script type="text/javascript">
$(document).ready(function () {
        $("#canvas").css('width','800px');
    });
</script>

answered Dec 8, 2013 at 3:22

Comfortably Numb

39.9k17 gold badges82 silver badges147 bronze badges

Collectives™ on Stack Overflow

jQuery not changing width

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related