I am attempting to use a chrome extension to take a screenshot of the current page, and then draw some shapes on it. After I have done that to the image, I turn the whole thing into a canvas that way it is all together, like the divs I have drawn on it are now baked into the 'image', and they are one in the same. After doing this, I want to turn the canvas back into a png image I can use to push to a service I have, but when I go to use the canvas.toDataURL() in order to do so, the image source that it creates is pletely transparent. If I do it as a jpeg, it is pletely black.

I read something about the canvas being 'dirtied' because I have drawn an image to it, and that this won't work in Chrome, but that doesn't make sense to me as I have gotten it to work before, but I am unable to use my previous method. Below is the code snippet that isn't working. I am just making a canvas element, and then I am drawing an image before that.

var passes = rectangles.length;
var run = 0;
var context = hiDefCanvas.getContext('2d');

while (run < passes) {
  var rect = rectangles[run];
  // Set the stroke and fill color
  context.strokeStyle = 'rgba(0,255,130,0.7)';
  context.fillStyle = 'rgba(0,0,255,0.1)';
  context.rect(rect.left, rect.top, rect.width, rect.height);               
  context.setLineDash([2,1]);
  context.lineWidth = 2;
  run++;
} // end of the while loop
screencapImage.className = 'hide';
context.fill();
context.stroke();
console.log(hiDefCanvas.toDataURL());

And the image data that it returns is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC which is a blank, transparent image.

Is there something special I need to do with Chrome? Is there something that I am missing? Thanks, I appreciate the time and help.

I am attempting to use a chrome extension to take a screenshot of the current page, and then draw some shapes on it. After I have done that to the image, I turn the whole thing into a canvas that way it is all together, like the divs I have drawn on it are now baked into the 'image', and they are one in the same. After doing this, I want to turn the canvas back into a png image I can use to push to a service I have, but when I go to use the canvas.toDataURL() in order to do so, the image source that it creates is pletely transparent. If I do it as a jpeg, it is pletely black.

I read something about the canvas being 'dirtied' because I have drawn an image to it, and that this won't work in Chrome, but that doesn't make sense to me as I have gotten it to work before, but I am unable to use my previous method. Below is the code snippet that isn't working. I am just making a canvas element, and then I am drawing an image before that.

var passes = rectangles.length;
var run = 0;
var context = hiDefCanvas.getContext('2d');

while (run < passes) {
  var rect = rectangles[run];
  // Set the stroke and fill color
  context.strokeStyle = 'rgba(0,255,130,0.7)';
  context.fillStyle = 'rgba(0,0,255,0.1)';
  context.rect(rect.left, rect.top, rect.width, rect.height);               
  context.setLineDash([2,1]);
  context.lineWidth = 2;
  run++;
} // end of the while loop
screencapImage.className = 'hide';
context.fill();
context.stroke();
console.log(hiDefCanvas.toDataURL());

And the image data that it returns is: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACWAAAAVGCAYAAAAaGIAxAAAgAElEQ…ECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAQBVKBUe32pNYAAAAAElFTkSuQmCC which is a blank, transparent image.

Is there something special I need to do with Chrome? Is there something that I am missing? Thanks, I appreciate the time and help.

• javascript
• angularjs
• html
• canvas

• 1 Does it show the screen properly when you ment out this section that draws rectangles on top of it? – Patrick Roberts Commented Jan 28, 2016 at 14:52
• @PatrickRoberts Are you asking me if the canvas renders correctly without any of the rectangles? If so, the answer is yes, it does render the image on the canvas correctly. – Ben Winks Commented Jan 28, 2016 at 14:55
• I don't actually think I can help unless I can see all your relevant code. With just this, the problem is not reproducible. – Patrick Roberts Commented Jan 28, 2016 at 15:10
• @PatrickRoberts I found some other issues whilst looking through the code, so I may be able to stumble upon a fix. I'm unable to post all the code, I am sorry. I appreciate your time though. – Ben Winks Commented Jan 28, 2016 at 15:19
• Do you see a security error in your console? If so, it's the "tainted" issue. If not, you are likely drawing rectangles across the entire image then filling them in which causes the image to be empty. – Mike Cluck Commented Jan 28, 2016 at 17:37

2 Answers 2

Had the same problem, and found the solution here: https://bugzilla.mozilla/show_bug.cgi?id=749824

"I can confirm, that it works if you set preserveDrawingBuffer.

var glContextAttributes = { preserveDrawingBuffer: true }; var gl = canvas.getContext("experimental-webgl", glContextAttributes);"

After getting the context with preserveDrawingBuffer, toDataURL just works as expected, no pletely transparent or black image.

Having a similar problem I found a solution, thanks to the following post https://github./iddan/react-native-canvas/issues/29.

These methods return a promise, so you would need to wait for it to resolve before the variable can be populated. My solution was to set asyn function and await for the result:

const canvas = <HTMLCanvasElement>document.getElementById("myCanvas")[0];
let ctx = canvas.getContext('2d');
let img = new Image();
img.onload = async (e) => { ctx.drawImage(img, 0, 0); ctx.font = "165px Arial";ctx.fillStyle = "white"; b64Code = await (<any>canvas).toDataURL(); }