Create a drawing canvas using javascript

advanced-prototyping

#1

Hoping to use some javascript in a Axure Plugin to be able to draw on a widget that I want to use as a canvas. I’m not great at javascript but I feel like this has got to be close based on the other forums I’ve looked at and similar post back with Axure 8, but none of it seems to work.

Here’s what I have:

  • Axure file with an 800x800 dynamic panel named myArtboard
  • Plugin “inside a specific dynamic panel” tied to myArtboard with HTML to define the canvas (below)
  • Plugin in the head tag with Javascript (below)

HTML:

<canvas id="myCanvas" width="800" height="800"></canvas>

JAVASCRIPT:

<script>
var canvas = document.getElement('myCanvas');
var ctx = canvas.getContext('2d');

canvas.addEventListener('mousedown', start);
canvas.addEventListener('mouseup', stop);

function start(event) {
  canvas.addEventListener('mousemove', draw);
  reposition(event);
}

function reposition(event) {
  coord.x = event.clientX - canvas.offsetLeft;
  coord.y = event.clientY - canvas.offsetTop;
}

function stop() {
  canvas.removeEventListener('mousemove', draw);
}

function draw(event) {
  ctx.beginPath();
  ctx.lineWidth = 5;
  ctx.lineCap = 'round';
  ctx.strokeStyle = '#ACD3ED';
  ctx.moveTo(coord.x, coord.y);
  reposition(event);
  ctx.lineTo(coord.x, coord.y);
  ctx.stroke();
}
</script>

Any ideas??


#2

Don’t know if you managed to figure this out on your own but I see a few things that might be causing you problems.

The first one is you need to use document.getElementById.

The second is you’re declaring the x,y variables inside a function so the other functions can’t see them. If you declare them at the top of your script and then assign values to them inside the function, it should work.


#3

Hey, I’m actually still working on it, and working on it at the moment ironically. Still no luck. Trying out different scripts and options i see online.


#4

I do have this working here… just having trouble figuring out how to port it into Axure at this point.

https://codepen.io/lauren-martin-schaefer/pen/gOoyobv


#5

I’ve gotten both of your code examples to work, but I used the javascript injection “hack” to do it all in the .rp file.

Drawing_In_Browser.rp (235.1 KB)


Line drawing animation
#6

I got it working! This is perfect thank you!!


#7

Do you think it’s possible to target an existing widget?

For example I have a rectangle, or dynamic panel already on the screen. I tried going into the code to get the id (for the element I’m testing the id is ‘u30’, and doing something like this:

var canvas = $axure(‘#u30’);
var ctx = canvas.getContext(‘2d’);

I used this at the top of the script after the wait instead of tying to the canvas created initially from scratch in the first open link, but it doesn’t seem to be working.


#8

Using any of the native Axure widgets won’t work because they’re not <canvas.> elements. That’s why you have to “inject” one using javascript. If you’re trying to have more control over its position on the page you could try putting it inside a dynamic panel or put it on a whole other page and using it as the target of an iframe.


#9

If you want to use an existing widget, you can’t directly. You’ll need to get the widget you want, get it’s size, and the create a new canvas element in its place with the same size. I have a script here that I’ve updated for Axure 10 and from my testing it seems to work fine: Draw Lines or Signature with Mouse


#10

ahh, the issue i’m having now is z-index of the canvas, i can’t put anything on top of it.


#11

Hm, not sure. I’m not able to recreate the issue.