Использование HTML5 Canvas в расширении Chrome - PullRequest
Новая
       73

Использование HTML5 Canvas в расширении Chrome

0 голосов
/ 30 января 2020

Я пытаюсь создать простое расширение chrome, которое позволяет пользователю рисовать на любой веб-странице.

Я создал дизайн для ручки, которая мне нравится, но я не уверен, как бы я это сделал превратить веб-страницу в холст.

1 Ответ

1 голос
/ 31 января 2020

Я думаю, вам нужно добавить холст к body и сделать его позицией absolute, чтобы он мог быть на вершине всего.

Вот пример: 

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>
...