====== Image Overlays for Tracing ======

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

**What you need:**
  * Your reference image hosted somewhere (such as postimage dot org ? )

**Steps:**
  - Open the Chutney draw tool on the comic you want to add a panel to
  - Draw a line on the canvas and erase it to activate Peyo energies (and to prevent it locking up after following steps)
  - Open your browser's inspector (F12)
  - Click on the Elements/Element Inspector tab
  - Click on an element in the html view
  - Activate find (ctrl+f)
  - Type 'not supported' to get to the canvas in Peyo's html !
  - 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>//
  - Enter text edit on the html element above the one you just edited starting '<div id="cancont"'
  - 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%">//
  - 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
  - close your browser's inspector to resume drawing with your image overlay!
  - 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:**
  * The simple html provided here means the image may not scale with Chutney zoom

**Ideas:**
  * Blender layouts with basic shapes that have wireframe overlay make handy references
  * You can edit together multiple images to plan a multi-panel panel  !
  * this process can be automated with a macro tool like xdotool/bash on linux, powershell on windows or something more direct like tampermonkey / browser tools / other !