Background

This is a pretty hard problem that I have been struggling with for a few days now. I am trying to display lessons in a slide-show format. So a lesson is made up of different slides. Now overlayed on top of each slide is a canvas element which is fit to the size of the screen.

canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;

This allows the teacher to draw notes and highlight parts of the lesson on the canvas.

Problem

The content of the slide is made up of HTML it looks like this when the slide is loaded.

When I resize the page however...

So the problem here is that the canvas 'image' is resized according to the aspect ratio of the page with CSS.

#theCanvas {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

But the actual HTML stays the same size, but re-arranges its line-wrap points, bad.

What I have Tried

First, I am making all my HTML elements resize according to the width and height of the window using CSS:

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 5.9vw;
}

h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 3.0vh;
}

h4 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #444444;
    font-weight: 200;
    font-size: 2vmin;
}

p {
    font-family: 'Open Sans Condensed';
    font-size: 2vmin;
    font-weight: 200;
}

Next I am saving and resizing the canvas image using:

window.onresize = function(event) {

    var data = canvas.toDataURL();

    // resize the canvas
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    //alert($(container).width());

    // scale and redraw the canvas content
    var img=new Image();

    img.width = document.body.clientWidth;
    img.height = document.body.clientHeight;

    img.onload=function(){
        context.drawImage(img,0,0,img.width,img.height);
    }
    img.src=data;

};

The result in full screen (1920px width)

When a click the resize window button (1200px)

That's pretty close.

Problem

Now when I drag the corner of the window to resize this happens:

Question

1 - Why is the window.onresize function not triggering when I manually resize the corner of the window?

(bonus question) Am I going about this the right way, or is it going to be more trouble then its worth to overlay canvas on HTML elements for interactive lessons?

Background

This is a pretty hard problem that I have been struggling with for a few days now. I am trying to display lessons in a slide-show format. So a lesson is made up of different slides. Now overlayed on top of each slide is a canvas element which is fit to the size of the screen.

canvas.width  = document.body.clientWidth;
canvas.height = document.body.clientHeight;

This allows the teacher to draw notes and highlight parts of the lesson on the canvas.

Problem

The content of the slide is made up of HTML it looks like this when the slide is loaded.

When I resize the page however...

So the problem here is that the canvas 'image' is resized according to the aspect ratio of the page with CSS.

#theCanvas {
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

But the actual HTML stays the same size, but re-arranges its line-wrap points, bad.

What I have Tried

First, I am making all my HTML elements resize according to the width and height of the window using CSS:

h1 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 5.9vw;
}

h2 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #222222;
    font-weight: 200;
    font-size: 3.0vh;
}

h4 {
    font-family: 'Open Sans Condensed', sans-serif;
    color: #444444;
    font-weight: 200;
    font-size: 2vmin;
}

p {
    font-family: 'Open Sans Condensed';
    font-size: 2vmin;
    font-weight: 200;
}

Next I am saving and resizing the canvas image using:

window.onresize = function(event) {

    var data = canvas.toDataURL();

    // resize the canvas
    canvas.width = document.body.clientWidth;
    canvas.height = document.body.clientHeight;
    //alert($(container).width());

    // scale and redraw the canvas content
    var img=new Image();

    img.width = document.body.clientWidth;
    img.height = document.body.clientHeight;

    img.onload=function(){
        context.drawImage(img,0,0,img.width,img.height);
    }
    img.src=data;

};

The result in full screen (1920px width)

When a click the resize window button (1200px)

That's pretty close.

Problem

Now when I drag the corner of the window to resize this happens:

Question

1 - Why is the window.onresize function not triggering when I manually resize the corner of the window?

(bonus question) Am I going about this the right way, or is it going to be more trouble then its worth to overlay canvas on HTML elements for interactive lessons?

• javascript
• html
• css
• canvas

Share Improve this question Follow asked Jan 21, 2017 at 13:12 Jethro HazelhurstJethro Hazelhurst 3,29577 gold badges4242 silver badges8585 bronze badges 9

• is there a live demo somewhere? – Serg Chernata Commented Jan 21, 2017 at 16:08
• 1 here is a fiddle... jsfiddle/gox4ajty – Jethro Hazelhurst Commented Jan 21, 2017 at 16:31
• well, it's triggering properly, the issue (i think) lies in the fact that drawing is done in pixel values for x and y position but you want it to depend on percentages. I do not have a solution :/ – Serg Chernata Commented Jan 21, 2017 at 18:47
• 3 There is no simple solution. The Html is using a sophisticated layout engine. Look at the first 2 images, The first image the time icon is to the left of the text, the next image it is over. In the first image the text is 2 1/2 lines, in the second the text is 4 lines. There is a way by using (abstract markers) on the html, and using them to distort the html image to fit. But there are so many edge cases that using the overlay will bee unfriendly and unused. – Blindman67 Commented Jan 24, 2017 at 2:58
• 1 ditto @Blindman67's ment. In your case, I would either reset the canvas drawings entirely on resize (just notify you users about it, and during their presentation, they'll have to try not to resize the window), or fix your layout once something has been drawn on the canvas. In current flow, it is impossible to tell if the user wanted to underline some of the text or just make a line that has nothing to do with the text, so you can't know where it should be drawn after resizing. – Kaiido Commented Jan 24, 2017 at 7:09

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 7 +50

I think I mis-understood your problem.

If you want the hand drawn stuff to match the html elements then you need to make sure the HTML elements never change layout and always keep the same relative sizes. In your example that's already NOT the case. You've got that "