JSFiddle - React, Tailwind, and code Playground

by brigand

HTML

<canvas id="thing" width="600" height="400"></canvas>
<style media="print">
  * {
    display: none;
  }
  html, body, canvas {
    margin: 0;
    padding: 0;
    display: block;
  }
  
  html, body, canvas {
    width: 6in;
    height: 4in;
  }
  canvas {
    position: absolute;
    top: 0;
    left: 0;
  }
  </style>
<button id="print">print</button>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim similique, cumque dolor eos quas quasi quam pariatur repudiandae voluptate! Voluptates minus aut, tempore impedit quasi molestiae qui odio expedita rem.</div>
<div>Magni provident facere saepe minima aliquid cum, doloribus odit modi quibusdam! Quaerat nemo molestias, debitis est atque tempora unde, illum reprehenderit placeat, earum consequatur a fugiat quis vel nihil provident.</div>
<div>Voluptatum, doloribus, sunt! Voluptas accusamus nobis assumenda quis placeat laboriosam quas eius, corporis labore quisquam fuga eos, architecto nesciunt debitis qui soluta expedita fugit asperiores non aut, velit nam magni.</div>
<div>Nesciunt ratione ducimus, illo earum, perspiciatis aut laboriosam dolor tempora eaque, laudantium vel doloremque. Modi, quod dolorum id explicabo, itaque repellat nihil impedit amet consectetur optio officiis deserunt accusamus. Facilis!</div>
<div>Beatae quibusdam repellat repellendus, ea ullam vitae fugiat, itaque nisi. Corporis vel ipsa nihil iure cumque quidem mollitia. Ut repudiandae modi voluptate eos dolore eligendi esse natus eaque optio officiis!</div>
<div>Distinctio, eius impedit dignissimos, unde quas vero vel est, atque ratione voluptatibus, reiciendis consequuntur aut. Culpa eveniet neque quibusdam totam maiores fugiat sequi, pariatur molestias, laboriosam et modi, unde repudiandae.</div>
<div>Earum nihil animi ut, incidunt at nulla eius, dolorem et dignissimos autem aut in blanditiis magni. Magnam sapiente tempora dicta perspiciatis natus, eius adipisci quae voluptatibus provident alias laudantium...

CSS

@media (print) {

}

JavaScript

const c = document.querySelector('#thing');
const p = document.querySelector('#print');
const ctx = c.getContext('2d')
ctx.fillRect(0, 0, 600, 400);


p.addEventListener('click', () => {
console.log('p')
	print();
})