Ghostwriting - need bigger canvas

Question

I'm just learning to play with html5's canvas property. I discovered an awesome program @ https://developer.mozilla.org/en-US/demos/detail/ghostwriter-art-studio/launch that lets users draw pictures, choosing from a variety of tools and colors.

I would like to modify the code so that, rather than give users a rectangular sandbox to play in, they can draw anywhere in an article. For example, imagine an article about physiology with three dozen paragraphs. They could underline or highlight any word or draw a little picture in the margin. Can this be done?

In fact, I've already modified the code and it's working almost perfectly...except that I'm still locked in a rectangular box.

This particular script has two canvases inside a div...

<div id="drawing">
  <canvas id="artboard" width="750" height="500"></canvas>
  <canvas id="workboard" width="750" height="500"></canvas>

Changing the height to 100% doesn't work. If I change #artboard's height to 2500px, the vertical drawing area actually shrinks.

I'm not sure if Ghostwriter is the only drawing script available; I haven't yet figured out a good search term. Anyway, can anyone either tell me how to make the vertical drawing area bigger or perhaps recommend another script I can check out?

score 1 · Accepted Answer · answered Mar 10 '15 at 00:09

1

In addition to #drawing change in HTML, you need to adjust CSS accordingly:

/* index.html */
<div id="drawing">
  <canvas id="artboard" width="1750" height="800"></canvas>
  <canvas id="workboard" width="1750" height="800"></canvas>

/* main.css */
#drawing {
  position: absolute;
  top: 0;
  right: 0;
  width: 1750px;
  height: 800px;
  background: #eee url(images/paper3.jpg);
  box-shadow: 1px 1px 5px #000;
  cursor: url(images/chrome_cursor.png), none !important;
}

#artboard, #workboard {
  position: absolute;
  top: 0;
  left: 0;
  width: 1750px;
  height: 800px;
}

By doing this I was able to increase the drawing area both horizontally and vertically: enter image description here

answered Mar 10 '15 at 00:09

Paweł Duda

1,713
4
18
36

Cool. I still can't get 100% to work, but I tried assigning a vertical height of 2800 pixels, and that works fine. So maybe I can just come up with a default setting of 5000px to cover most of my articles. I just hope that doesn't push the bottom of the page way down on short articles. – Mar 10 '15 at 00:20
The problem most likely lies in canvas not being 100% of screen width/height. It would probably require a lot more tampering but this could be a good starting point for achieving this: http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport – Paweł Duda Mar 10 '15 at 00:25
I took a look at that discussion, and it does look like the solution. – Mar 10 '15 at 00:49

Ghostwriting - need bigger canvas

1 Answers1