3

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...

Miha Vidakovic
  • 393
  • 1
  • 4
  • 13

2 Answers2

3

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/

Maximillian Laumeister
  • 19,884
  • 8
  • 59
  • 78
0

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>
AwokeKnowing
  • 7,728
  • 9
  • 36
  • 47
  • Setting the canvas width in CSS will cause the canvas to be stretched, which it doesn't seem like OP is looking for. [See this answer](https://stackoverflow.com/questions/2588181/canvas-is-stretched-when-using-css-but-normal-with-width-height-properties) for details. – Maximillian Laumeister Jul 31 '15 at 18:54
  • @MaximillianLaumeister yes, but that's generally not a bad thing. It's perfectly reasonable, as with an image, to stretch it to the width of whatever, and in the actual canvas code, you control the pixels, just like with an image you can have a hi res or low res image, besides the stretching. – AwokeKnowing Jul 31 '15 at 19:00