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/