是否可以繪製比當前屏幕更大的畫布？

Question

我正在將圖像繪製到畫布上，當這樣做時，即使圖像的大小與畫布的大小相同，圖像也會縮小到畫布上（這會導致畫布質量下降），這是因爲img做得很好縮小實際上具有更大自然高度和自然寬度的實際img。我知道有可能使這種質量更好的方法，但是我不需要實際向用戶展示這幅畫布/不需要縮小比例。因此，我想知道是否有任何方法可以繪製比屏幕更大的圖像並將其保持在某個位置？聽說某人在某處提到了一個盒子對象或一個相機對象，但卻無法真正使用這些信息。

問題，是否可以繪製比屏幕更大的畫布？在那種情況下如何？

這是代碼即時通訊與ATM

var image = document.getElementById('insertedImg'); 
var height = $("#insertedImg").height(); 
var width = $("#insertedImg").width(); 
var c=document.getElementById("canvass"); 
var ctx=c.getContext("2d"); 
c.height=height; 
c.width=width; 
ctx.drawImage(image,0,0,width,height); 

Answer 1

工作使用的屏幕外的畫布，你只需要創建一個新的畫布，並設置其高度和寬度相應。然後你可以將它附加到一個元素或者將圖像作爲base64字符串或任何你需要的輸出。

//canvas is not visible unless appended to a DOM element 
var canvas = document.createElement('canvas'); 
canvas.width = $("#insertedImg").height(); 
canvas.height = $("#insertedImg").width(); 
var ctx = canvas.getContext('2d'); 

//do the drawing, etc. 
ctx.drawImage(...); 

//export the image 
var img = canvas.toDataURL("image/png");