       ctx = canvas.getContext('2d')
       img = new Image()
       img.onload = (e) =>
-        canvas.width = img.width
-        canvas.height = img.height
-        ctx.drawImage(img, 0, 0, img.width, img.height)
+        viewportSize = 441
+        canvas.width = viewportSize
+        canvas.height = viewportSize
+        ctx.drawImage img, 0, 0, viewportSize, viewportSize
       img.src = $('.current .image img').attr('src')
     next:
       'mouseup .annotation': (e, tutorial, step) ->

  try_again: new Step
    header: translate 'span', 'tutorial.try_again.header'
    details: translate 'span', 'tutorial.try_again.details'
    attachment: 'left top .current 1 0.44'
    className: 'arrow-left'
    blocks: '.controls:first'
    next:

  good_job: new Step
    header: translate 'span', 'tutorial.good_job.header'
    details: translate 'span', 'tutorial.good_job.details'
    attachment: 'left center .primary 0.7 center'
    block: '.controls'
    className: 'arrow-left'
    next: 'training'
