How to make canvas generated with javascript to be 100% width?

Question

I have one canvas element generated by javascript, here is the code: http://jsfiddle.net/mtvzgnmm/

<div id="circle"></div>
<script>
    $('#circle').circleProgress({
        value: 0.75,
        size: 400,
        fill: {
            gradient: ["#e57569"]
        }
    });
</script>

But I have this #circle div in another div with 500px width, and I want to create mobile version too, but I can't make my canvas 100% wide...

Answer 1

Try this in your initialization:

size: $('#circle').parent().width(),

That will get the #circle element, get the parent of that element, then set the canvas' width to the width of its parent.

This will result in a canvas that is 100% of the width of its parent.

JSFiddle: http://jsfiddle.net/mtvzgnmm/1/

Answer 2

you can just add the style to the canvas element. For example, change this one line

var canvas = this.canvas = this.canvas || $('<canvas style="width:100%">').prependTo(this.el)[0];

So obviously better would be to add class="mobilefull"

.mobilefull{width:100%}

Then you can add that class in javascript, if that's how you're detecting mobile, or better, use media queries:

<style>
.mobilefull{}
@media only screen and (max-width: 640px){
  .mobilefull{width:100%}
}
</style>