How to make a canvas with javascript equal to 100% width?
I have one javascript generated canvas element, 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 that is 500px wide and I want to create a mobile version as well, but I cannot make my canvas 100% wide ...
source to share
Try this on initialization:
size: $('#circle').parent().width(),
This will get an element #circle
, 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/
source to share
you can just add style to the canvas element. For example change this line
var canvas = this.canvas = this.canvas || $('<canvas style="width:100%">').prependTo(this.el)[0];
So obviously it would be better to add class="mobilefull"
.mobilefull{width:100%}
Then you can add this class to javascript if you are detecting mobile or better using media queries:
<style>
.mobilefull{}
@media only screen and (max-width: 640px){
.mobilefull{width:100%}
}
</style>
source to share