HTML5 Canvas विकृत

Canvas विकृति ठीक करना

यदि Canvas विकृत दिखता है, तो ऊंचाई और चौड़ाई बदलने का प्रयास करें:

<canvas id="canvas1" width="400" height="300"></canvas>

HTML5 में Canvas की डिफ़ॉल्ट ऊंचाई और चौड़ाई 2/1 अनुपात की होती है:

width = 300
height = 150

उदाहरण

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      #mycanvas{border:1px solid red;}
    </style>
  </head>
  <body>
    <canvas id="mycanvas" width="100" height="100"></canvas>
  </body>
</html>

आउटपुट

CSS के माध्यम से आकार देने के बजाय Canvas एलिमेंट पर चौड़ाई/ऊंचाई एट्रिब्यूट्स को हमेशा सेट करें ताकि स्केलिंग विकृति से बचा जा सके।