glamour-image-buy-button-test.js

(() => {
	const image = document.querySelector('.col-content img');
	const canvas = document.createElement('canvas');
	const ctx = canvas.getContext('2d');

	canvas.width = 800;
	canvas.height = 800;

	ctx.fillStyle = '#fff';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	const img = new Image();
	img.setAttribute('crossorigin', 'anonymous');
	img.onload = () => {
		ctx.drawImage(img, 100, 0, 600, image.height / image.width * 600);

		// draw rect
		ctx.fillStyle = '#f6d3d5';
		ctx.fillRect(600, 700, 200, 70);

		ctx.fillStyle = '#222';
		ctx.font = '32px sans-serif';
  		ctx.fillText('КУПИТЬ', 600 + ((200 - ctx.measureText('КУПИТЬ').width) / 2), 745);

		window.open().document.write('<img src="' + canvas.toDataURL() + '" />');
	}
	img.src = image.src;
})();