Search code examples
offsetbulma

Bulma Container causing problem in canvas?

I created a paintable canvas as suggested in here

<!-- Part 1: Works -->
<canvas id='paint' width={250} height={250}/>

Then I moved it into a container

<!-- Part 2: Offset! -->
<div class="container">
  <p class="notification is-info">Draw on the box provided</p>
  <canvas id='paint' width={250} height={250}/>
</div>

This creates offset problems:

JSFiddle here: (Please View results in fullscreen to see the offset)

enter image description here

Is it a bulma issue or am I doing something wrong?

Solution

  • I found a fix: add this css rule:

    .container {
    position: static
}

    I simulated the effect in this JSFiddle by adding a margin of 20px, it would offset the pointer by 20px. The problem seems to be that container is position: relative. If changed to static the issue disappears.

    Hope it helps!

    https://jsfiddle.net/9qxoa32y/

    And here you can see it in action:

    https://jsfiddle.net/woyvbe5L/embedded/result/