title: What is necessary to make QtQuick 2's Canvas element HiDPI-(retina-)aware?
body: <p>I have the following qml application:</p>
  
  <pre class="lang-js prettyprint-override"><code>import QtQuick 2.1
  import QtQuick.Controls 1.0
  import QtQuick.Layouts 1.0
  import QtQuick.Window 2.0
  
  ApplicationWindow {
      id: window
      width: 480
      height: 240
  
  
      RowLayout {
  
          Rectangle {
              width: window.height
              height: window.height
              radius: window.height / 2
              color: "black"
          }
  
          Canvas {
              id: canvas
              width: window.height
              height: window.height
  
              onPaint: {
                  var ctx = canvas.getContext('2d');
                  var originX = window.height / 2
                  var originY = window.height / 2
                  var radius = window.height / 2
  
                  ctx.save();
  
                  ctx.beginPath();
                  ctx.arc(originX, originY, radius, 0, 2 * Math.PI);
                  ctx.fillStyle = Qt.rgba(0, 0, 0, 1);
                  ctx.fill();
  
                  ctx.restore();
              }
  
          }
      }
  }
  </code></pre>
  
  <p>This produces two black circles next to each other. The left one (the <code>Rectangle</code>) is crisp on a Retina display, while the right one (the <code>Canvas</code>) is quite blurry. If I add </p>
  
  <pre><code>                antialiasing: false
  </code></pre>
  
  <p>to the <code>Canvas</code>, it produces coarse blurry pixels.</p>
  
  <p>What do I need to do to make the <code>Canvas</code> HiDPI-aware?</p>
  
  <p><sub>(I'm using Qt 5.2.0 beta 1 on Mac OS X 10.8)</sub></p>
  
  <hr>
  
  <p><strong>Edit:</strong> The workaround I came up with was to wrap the <code>Canvas</code> in an <code>Item</code>, scale everything up inside <code>onPaint</code> and then use a <code>transform</code> on the <code>Canvas</code> the scale it back down.</p>
  
  <pre class="lang-js prettyprint-override"><code>    Canvas {
          id: canvas
          x: 0
          y: 0
          width: parent.width * 2   // really parent.width after the transform
          heigth: parent.height * 2 // really parent.height after the transform
  
          /* ... */
  
          // This scales everything down by a factor of two.
          transform: Scale {
              xScale: .5
              yScale: .5
          }
  
          onPaint: {
              var ctx = canvas.getContext('2d');
              ctx.save();
              ctx.scale(2, 2)       // This scales everything up by a factor of two.
  
              /* ... */
          }
      }
  </code></pre>