CODEWITHSUNDEEP
javascripthtmlcsscanvas
sevku
sevku

Reputation: 63

assign canvas to div, adapt canvas dimensions to div dimenson - how to fix?

I have this example of a canvas as a div background (I forked it from another example, don't remember where I found it): http://jsfiddle.net/sevku/6jace59t/18/

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var divHeight = document.getElementById('canvas').clientHeight;
var divWidth = document.getElementById('canvas').clientWidth;

function assignToDiv(){ // this kind of function you are looking for
  dataUrl = canvas.toDataURL();
  document.getElementsByTagName('div')[0].style.background='url('+dataUrl+')'
}

function draw() { // replace with your logic
  ctx.fillStyle = "rgb(100, 250, 100)";
  ctx.fillRect (10, 10, divWidth-20, divHeight-20);
}

draw()
assignToDiv()

My problem; If I put the dimensions of the div 300 x 150, the canvas does what it is supposed to do. But if I change the dimensions, the canvas is supposed to adapt to the div dimensions. What did I do wrong that this doesn't happen?

PS: I'm a beginner, so please forgive me stupid questions.

Upvotes: 0

Views: 228

Answers (1)

fuyushimoya
fuyushimoya

Reputation: 9813

It's because if you don't give canvas width and height, it's default to 300x150, so after you get the width and height from div, you should use them to set your canvas' dimensions as well.

Another point worth notice is that you use div.style.background property to set the background image, however, as there's many background related properties (e.g: background-repeat in your jsfiddle, background-position, background-size...), the background can set all of them at once. When you use div.style.background='url('+dataUrl+')';. It overrides all other background-related properties to initial.

If you want to preserve those properties, you may either reset them after you set style.background, or you can use div.style.backgroundImage to change the background image without affect other background related properties.

jsfiddle

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var divHeight = document.getElementById('canvas').clientHeight;
var divWidth = document.getElementById('canvas').clientWidth;
   
// VVVV After you get WxH, set the canvas's dimension too.
canvas.width = divWidth;
canvas.height = divWidth;

var div1 = document.getElementById('canvas');
var div2 = document.getElementById('canvas2');

function assignToDiv(div){ // this kind of function you are looking for
  var dataUrl = canvas.toDataURL();
  div.style.background='url('+dataUrl+')';		// This line will overwrite your background settings.
  div.style.backgroundRepeat = 'repeat-x';	 // Use this to set background related properties after above.
}

function assignToDivAlt(div){ // this kind of function you are looking for
  var dataUrl = canvas.toDataURL();
  div.style.backgroundImage = 'url('+dataUrl+')';  // Only set the background-image would have same effect.
}

function draw() { // replace with your logic
  ctx.fillStyle = "rgb(100, 250, 100)";

  // If you don't set WH, then the canvas would be 300x150, and those 
  // you drawed but out of boundary are clipped.
  ctx.fillRect (10, 10, divWidth-20, divHeight-20);
}

draw()
assignToDiv(div1);
assignToDiv(div2);
canvas {display:none;}
div {
    width:600px;
    height:550px;
    border:1px solid grey;
    background-repeat:repeat-x;
}
<canvas></canvas>
<div id="canvas"></div>
<div id="canvas2"></div>

Upvotes: 2

Related Questions