I try to insert an SVG element into a canvas. I would like to add padding for math equations inside the canvas.

You can see the first result without padding on this link

Now, if I take a positive value for padding, the dimensions (width and length) are increasing. For example, with a padding equal to 20px, I get the following result : link for padding: 20px.

Finally, If I take a larger value (padding: 60px), I get this result :

link for padding: 60px

You can notice for each of these 3 cases that I put "box-sizing: border-box;" for "<canvas width="400px" height="400px" id="textbox"></canvas>"

#textbox {
position: absolute;
padding: 60px;
box-sizing: border-box;
background-color: #333333;
border: 2px solid #428bca;
z-index: 100;
}

I would like to set padding for math equations without changing the size of canvas : I thought that box-sizing: border-box; could allow me to get this result.

Anyone could see where the problem es from ?

Thanks

UPDATE 1 :

The solution given by AlexK doesn't precisely solve my issue. you can see this link where I have added the math equations, you will notice that equations are centered vertically and horizontally inside green square but what I would like to get is to put the block of equations (I mean from the first line of block equations) at the top left corner of green square.

I try to insert an SVG element into a canvas. I would like to add padding for math equations inside the canvas.

You can see the first result without padding on this link

Now, if I take a positive value for padding, the dimensions (width and length) are increasing. For example, with a padding equal to 20px, I get the following result : link for padding: 20px.

Finally, If I take a larger value (padding: 60px), I get this result :

link for padding: 60px

You can notice for each of these 3 cases that I put "box-sizing: border-box;" for "<canvas width="400px" height="400px" id="textbox"></canvas>"

#textbox {
position: absolute;
padding: 60px;
box-sizing: border-box;
background-color: #333333;
border: 2px solid #428bca;
z-index: 100;
}

I would like to set padding for math equations without changing the size of canvas : I thought that box-sizing: border-box; could allow me to get this result.

Anyone could see where the problem es from ?

Thanks

UPDATE 1 :

The solution given by AlexK doesn't precisely solve my issue. you can see this link where I have added the math equations, you will notice that equations are centered vertically and horizontally inside green square but what I would like to get is to put the block of equations (I mean from the first line of block equations) at the top left corner of green square.

• javascript
• html
• css
• canvas

• You know you can modify the parameters passed in drawImage ? jsfiddle/cjafru1m/8 Also, as I already told you on your previous question, you would be better just to style the container with CSS, or even do everything with the canvas API : jsfiddle/cjafru1m/11 And finally, to avoid the problems while drawing your svg, fix its bounding box with the viewBox attribute so that there is no top or bottom margin. – Kaiido Commented Dec 22, 2016 at 13:09

1 Answer 1

Set the width and height CSS properties, as well as their HTML attribute counterparts. Note that you'll want to keep the same aspect ratio, or the image will appear distorted.

Update: draw the image in its original aspect ratio too, or it will be stretched!

var textCanvas = document.getElementById('textbox');
var contextTextBox = textCanvas.getContext('2d');

contextTextBox.fillStyle = "green";
contextTextBox.fillRect(0, 0, 400, 400);

var img = new Image;
img.onload = function() {
  contextTextBox.drawImage(img, 0, 0, 378, 150);
};
img.src = "http://example./test_last/formulaWhite.svg";

#textbox {
  position: absolute;
  padding: 60px;
  box-sizing: border-box;
  background-color: #333333;
  border: 2px solid #428bca;
  z-index: 100;
  height: 400px;
  width: 400px;
}
#containerCanvas {
  position: relative;
  top: 0;
  left: 0;
  margin: 20px;
}

<div id="containerCanvas">
  <canvas width="400" height="400" id="textbox"></canvas>
</div>

The HTML height and width properties control the resolution of your drawing space - they allow you to fit more or less content in the drawing area. The CSS dimensions will scale the canvas to occupy a certain amount of space on-screen.

Here's an example with more "drawing area", yet takes up the same 400x400 pixels on-screen.

var textCanvas = document.getElementById('textbox');
var contextTextBox = textCanvas.getContext('2d');

contextTextBox.fillStyle = "green";
contextTextBox.fillRect(0, 0, 756, 756);

var img = new Image;
img.onload = function() {
  contextTextBox.drawImage(img, 0, 0, 378, 150);
  contextTextBox.drawImage(img, 378, 0, 378, 150);
  contextTextBox.drawImage(img, 0, 150, 378, 150);
  contextTextBox.drawImage(img, 378, 150, 378, 150);
};
img.src = "http://example./test_last/formulaWhite.svg";

#textbox {
  position: absolute;
  padding: 0;
  box-sizing: border-box;
  background-color: #333333;
  border: 2px solid #428bca;
  z-index: 100;
  width: 400px;
  height: 400px;
  padding: 60px;
}

#containerCanvas {
  position: relative;
  top: 0;
  left: 0;
  margin: 20px;
}

<div id="containerCanvas">
  <canvas width="756" height="756" id="textbox"></canvas>
</div>