HTML5 canvas使用ImageData设置像素之后会有一部分透明的问题？

最近在学canvas，现在我创建一个离屏canvas并且设置imageData的像素，在调用context.drawImage()方法将离屏canvas绘制到屏幕中的时候设置的像素点会有一部分透明出现

1. const canvas = document.getElementById('canvas') as HTMLCanvasElement;
   
2. const dpr = window.devicePixelRatio;
   
3. 
   
4. const width = 200;
   
5. const height = 200;
   
6. 
   
7. canvas.width = width * dpr;
   
8. canvas.height = height * dpr;
   
9. canvas.style.width = width + 'px';
   
10. canvas.style.height = height + 'px';
    
11. const context = canvas.getContext('2d')!;
    
12. 
    
13. const offCanvas = document.createElement('canvas');
    
14. const offContext = offCanvas.getContext('2d')!;
    
15. 
    
16. const imageData = offContext.getImageData(0, 0, offCanvas.width, offCanvas.height);
    
17. imageData.data[0] = 0;
    
18. imageData.data[1] = 0;
    
19. imageData.data[2] = 0;
    
20. imageData.data[3] = 255;
    
21. 
    
22. offContext.putImageData(imageData, 0, 0);
    
23. 
    
24. context.scale(20, 20);
    
25. context.drawImage(offCanvas, 0, 0);
    

复制代码

一个实心的方块，但是现在有一部分透明了，请问如何解决

关注, 学习一下