0

I'm trying to create a simple chrome extension that allows the user to draw onto any webpage.

I've created a design for the pen that I like but am unsure of how I would turn the webpage into the canvas.

bleepbloopbleep
  • 59
  • 1
  • 6
  • Using jquery https://www.tutorialspoint.com/Print-a-HTML5-canvas-element But instead using a small element you could call the entire body... You'll have to usa a library, i think so. Maybe this https://github.com/erikzaadi/jQuery.printElement – Danielr Jan 30 '20 at 19:15
  • https://stackoverflow.com/questions/2255291/print-the-contents-of-a-div this could be helpful too – Danielr Jan 30 '20 at 19:20

1 Answers1

1

I think you have to append the canvas to the body and make it's position absolute so that it can be in the top of everything.

Here is an example: 

const canvas = document.createElement('canvas');

canvas.id = "my-canvas";
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.top = '0px';
canvas.style.position = "absolute";
canvas.style.zIndex = 999;

const body = document.getElementsByTagName("body")[0];
body.appendChild(canvas);


// Some optional drawings.
const ctx = canvas.getContext("2d");
ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
ctx.fillRect(100, 100, 200, 200);
ctx.fillStyle = "rgba(0, 255, 0, 0.2)";
ctx.fillRect(150, 150, 200, 200);
ctx.fillStyle = "rgba(0, 0, 255, 0.2)";
ctx.fillRect(200, 50, 200, 200);
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Canvas Example</title>
</head>
<body>
  
  <h1>This is a special body title</h1>
  
  <div> LALALALAL  LALALALALAL LALALALALA </div>
  
</body>
</html>
V. Sambor
  • 12,361
  • 6
  • 46
  • 65
  • `window` is the global `this` and thus redundant in your code. You don't use it to access any other global properties eg `window.document` so why arbitrarily use it for `window.innerWidth`. Also you don't need to query for `body` it is a named property `window.document.body` and thus used as `document.body.appendChild(canvas)` – Blindman67 Jan 31 '20 at 12:05