рисовать прямоугольник над html с javascript

Question

Я знаю, что есть аналогичный вопрос here, но ни вопрос, ни ответ не имеют никакого кода.

Что я хочу сделать, это передать эту функциональность в 100% -ное решение Javascript. Прямо сейчас я могу нарисовать прямоугольник поверх содержимого HTML с помощью PHP.

Я очищаю сайт с помощью CasperJS, делаю снимок, отправляю путь моментального снимка обратно на PHP вместе с объектом json, который содержит всю информацию, необходимую для рисования прямоугольника с библиотеками GD. Это работает, но теперь я хочу перенести эту функциональность в Javascript.

Путь я получаю информацию прямоугольник использует getBoundingClientRect(), который возвращает объект с top, bottom, height,width, left и right.

Есть ли способ «нарисовать» HTML-сайт на элемент холста, а затем нарисовать Rectangle на этом элементе холста? Или можно ли рисовать прямоугольник поверх HTML с помощью Javascript?

Надеюсь, мой вопрос достаточно ясен.

Это функция, которую я использую, чтобы получить координаты элементов, которые я хочу нарисовать вокруг Rectangle.

function getListingRectangles() { 
    return Array.prototype.map.call(document.querySelectorAll('.box'), function(e) { 
     return e.getBoundingClientRect(); 
}); 

Answer 1

Вы можете создать холст элемент и поместить его в верхней части HTML страницы:

//Position parameters used for drawing the rectangle 
var x = 100; 
var y = 150; 
var width = 200; 
var height = 150; 

var canvas = document.createElement('canvas'); //Create a canvas element 
//Set canvas width/height 
canvas.style.width='100%'; 
canvas.style.height='100%'; 
//Set canvas drawing area width/height 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
//Position canvas 
canvas.style.position='absolute'; 
canvas.style.left=0; 
canvas.style.top=0; 
canvas.style.zIndex=100000; 
canvas.style.pointerEvents='none'; //Make sure you can click 'through' the canvas 
document.body.appendChild(canvas); //Append canvas to body element 
var context = canvas.getContext('2d'); 
//Draw rectangle 
context.rect(x, y, width, height); 
context.fillStyle = 'yellow'; 
context.fill(); 

Этот код должен добавить желтый прямоугольник в [100, 150] пикселей от верхнего левого угла страница.