J'essaie de créer une simple extension chrome qui permet à l'utilisateur de dessiner sur n'importe quelle page Web.

J'ai créé un design pour le stylo que j'aime mais je ne sais pas comment je transformerais la page Web en toile.

0
bleepbloopbleep 30 janv. 2020 à 22:11

1 réponse

Meilleure réponse

Je pense que vous devez ajouter le canevas au body et faire sa position absolute afin qu'il puisse être au sommet de tout.

Voici un exemple:

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>
1
V. Sambor 31 janv. 2020 à 05:48