Image Overlays for Tracing

Use a semi opaque image as a guide to trace over for your panel drawing on Chutney!

What you need:

Steps:

  1. Open the Chutney draw tool on the comic you want to add a panel to
  2. Draw a line on the canvas and erase it to activate Peyo energies (and to prevent it locking up after following steps)
  3. Open your browser's inspector (F12)
  4. Click on the Elements/Element Inspector tab
  5. Click on an element in the html view
  6. Activate find (ctrl+f)
  7. Type 'not supported' to get to the canvas in Peyo's html !
  8. Edit the html line starting '<canvas id=' to add 'opacity:0.6;' in the 'style=' attribute. Example: <canvas id=“myCanvas” width=“600” height=“500” style=“opacity:0.6;width: 722px; height: 601.667px; cursor: pointer;”>canvas not supported?</canvas>
  9. Enter text edit on the html element above the one you just edited starting '<div id=“cancont”'
  10. On a new line between the html element starting '<div id=“cancont”' and the html element starting '<canvas id=', insert the following html snippet: <img src=“IMGHERE” style=“position:absolute;width:100%;height:100%”>
  11. replace the text 'IMGHERE' with the url of your hosted image, it should be a direct link ending with the image extension such as .jpg or .png
  12. close your browser's inspector to resume drawing with your image overlay!
  13. if you wish to hide the overlay, reopen your inspector and change the 'opacity' line you added from '0.6' to '1'

Sample Html Result:

After following the above steps, you may have something similar to this in your html inspector: 

<div id="cancont" style="width: 722px; height: 601.667px; left: 8px; top: 88px;">
    <img src="https://pchutney.com/public/avatars/avatar_1.png" style="position:absolute;width:100%;height:100%">  
    <canvas id="myCanvas" width="600" height="500" style="opacity:0.6; width: 722px; height: 601.667px; cursor: pointer;">canvas not supported?</canvas>
</div>

Limitations:

Ideas: