使用面料js調整畫布的大小

Question

該應用程序允許用戶保存設計並將其發佈，以便其他用戶以後可以查看。

原始畫布以寬度= 700和高度= 600的比例保存。但是當顯示畫布時，我想調整畫布大小以適應（350,300）的尺寸。原來的一半。但是，如果我直接應用這些尺寸和加載寬度setWidth（）和setHeight（），它將以原始比例加載。

我想要的只是以新的尺寸顯示畫布。

Answer 1

以前回答here。

我不知道你一直很努力的，但

var canvas = document.getElementsByTagName('canvas')[0]; 
canvas.width = 800; 
canvas.height = 600; 

應該正常工作。

Answer 2

如果您使用庫fabric.js，那還不夠。

考慮到「畫布」是fabric.js實例對象，你應該這樣做，以避免畸變僞影：

canvas.setWidth(<desired width>); 
canvas.setHeight(<desired height>); 
canvas.calcOffset();