How to convert canvas to image, given styles applied to it?

Question

css

There is a canvas element
<canvas id="myCanvas"></canvas>
Then some styles applied to it

#myCanvas{
    border:25px solid #FFF;
    border-image-source:url(../images/frames/1.jpg);
    border-image-slice:70;
    border-image-repeat:round;
    box-shadow:0 0 0 500px #FFF inset;
}

And the js function itself

var canvas = document.getElementById('myCanvas');
  var image = new Image();
  image.src = canvas.toDataURL("image/png", 0.6);
  window.open(image.src);

I want to be able to save the image to my computer.
The function converts only the contents of the canvas to an image.
Is it possible to take into account styles while doing this?
I dug in the direction of screenshots using javascript (the same html2canvas), but it did not work out. Styles are still ignored.

Answer 1

Canvas gives you a lot of power, and you use CSS for such a simple task ...
Draw this border directly on it, and then google the toDataURL method .