변형 된 사각형을 완전히 지울 수 없습니다 <canvas>

Question

이 코드는 캔버스 요소에서 변환 된 사각형을 완전히 지울 수 없습니다. 어떻게 완전히 삭제할 수 있습니까?

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

context.transform(1, 0.5, 0, 1, canvas.width/2 , canvas.height); 
context.fillStyle = 'red'; 
context.fillRect(20, 20, 200, 100); 
context.clearRect(20, 20, 200, 100); 

내가 1 픽셀의 상단과 나머지 국경을 취소 2 픽셀 폭 증가 명확 사각형을 이동 코드

var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

var x = 20; 
var y = 20; 
var width = 200; 
var height = 100; 

context.transform(1, 0.5, 0, 1, canvas.width/2 , canvas.height/2); 
context.fillStyle = 'red'; 
context.fillRect(x, y, width, height); 
context.clearRect(x, y - 1, width, height + 2); 

에 따라 변형 사각형을 지울 수 있습니다.

이 코드는 잘 작동합니다. 그러나 그것은 단기적인 해결책입니다!

Answer 1

이 문제가 발생했습니다. 이것은 초기 모양에 적용되는 앤티 앨리어싱에 의해 발생합니다. 캔바스를 변환하지 않을 때 사각형과 같은 앤티 앨리어싱을 사용하지 않는 셰이프와 함께 작동합니다. 내가 찾은 유일한 해결책은 clearRectangle으로 약간 더 큰 모양으로 (약 1-2 픽셀 씩) 호출하는 것입니다.