JSFiddle - React, Tailwind, and code Playground

by mahks

HTML

<div id='txt'>
Chrome seems to have a minimum size for a canvas to use "source-atop"
<br>In firefox test works at initial dimensions.
<br>- Click the blue div in Chrome to set to the minimum.
<br>- Change "source-atop" to "source-over" and Chrome works as expected.
</div><br>
<canvas id='test'></canvas>
<div id='fix_chrome'>Click to Fix Chrome</div>

CSS

#test{ 		border:1px #666 solid}
#txt{       }
#fix_chrome{	color:#fff;background:#08f;padding:10px ;width:160px;cursor:pointer}

JavaScript

var  w=100
	,h=100
document.getElementById('fix_chrome').onclick=fix
begin()
function begin(){
var n=document.getElementById('test')
	n.width=w
	n.height=h
	n=n.getContext('2d')
	n.fillStyle='#ff0'
	n.fillRect(10,10,50,50);

	n.globalCompositeOperation='source-atop'
    //n.globalCompositeOperation='source-over'
	n.fillStyle='rgba(255,0,0,.5)'
	n.fillRect(20,20,50,50);
}
function fix(){  
	//w=219
    w=220
    //h=299
	h=300
	begin()
}