0

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?

Saravanabalagi Ramachandran
  • 8,551
  • 11
  • 53
  • 102
  • It may help to know the browser and os, I cannot reproduce it on mac with chrome 69.0.3497.100 – mchl18 Oct 20 '18 at 11:35
  • that's interesting, I tested on Chrome, Edge, Opera on Windows and all show the offsets. Did you try it on fullscreen? Containers don't add padding when viewed in the default screen given by fiddle, did you get any padding to the left side of columns as shown in the gif? – Saravanabalagi Ramachandran Oct 20 '18 at 11:43
  • Okay now I see it... yeah it is certainly an issue with the containers auto margin, it seems to be an issue with positioning of the canvas. The offset of the cursor seems to equal the left margin which is created by the container – mchl18 Oct 20 '18 at 11:56
  • setting the container width to 100% solves the problem but obviously defeats the purpose – mchl18 Oct 20 '18 at 11:58
  • Bootstrap containers don't have dynamic margins, do they? Can this be attributed to bulma then? Also, do you suggest any workarounds or hacks (without width 100%)? – Saravanabalagi Ramachandran Oct 20 '18 at 12:01
  • I believe bootstrap too has these dynamic containers. The alternative would be to flex everything which usually is a terrible idea. The issue comes from somewhere between css display properties and the way canvas detects the input. Yes, I have found a fix by playing with the `position` attribute of the container – mchl18 Oct 20 '18 at 15:46

1 Answers1

1

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/

mchl18
  • 2,119
  • 12
  • 20