@lyoung I followed the steps you indicated in your post, created plugin with canvas and copied javascript in Onpageload with the open “” case. But it doesn’t seem to work. Are there any other amendments that you have done and you might not have mentioned? If it’s not too much to ask, Is there any chance you could share the prototype?
Thanks!
Might wanna refer to this post: How to create a Line Draw function in Axure with some math and trigonometry
@AntonMircea Maybe you can share a prototype how you made it work? That would be great!
Thanks!
Hello from the future! I was trying to prototype a drawable signature field myself, and really wanted to come up with a native Axure solution. I got close, and the result is kind of academically interesting but not terribly practical for my purposes. Posting it here in case it’s helpful for someone else.
Live example
drawing-canvas.rp (66.0 KB)
Basically I’m using a repeater to populate a grid of “pixels” that can be turned on or off as the mouse cursor drags over them. It mostly works if you limit the number of repeater items and make your “pixels” large (mine are 15x15px). But since each item is responsible for checking to see whether the cursor is over it, and then turning itself on or off, it gets extremely slow the more pixels you add. So this version has kind of a retro 8-bit feel to it. It would be great if anyone has ideas for improving it!
Hi @Rebecca91
Here’s the working prototype hosted online - https://fe5qnk.axshare.com
And I’m attaching the .rp file as well.
Bare in mind the in order for the prototype to work you need to host it on axure share, and you have to add the page with the javascript to the plugin pages see attached.
drawline.rp (68.8 KB)
Hope this helps.
Cheers!
Hi @AntonMircea,
Could you add the plugin you used to your post?
I would be so nice to have all the necessary information in one place 
And thanks a lot, it could be useful for a future design 
Best,
Hi @Pierre.J
the plugin cannot be added as it’s not a file, it’s a setting in the axure share functionality.
See attached
Hope this helps.
Cheers!
Just throwing in some code I created for this previously. You can add this as an AxShare plugin or in an OpenLink action with javascript:. You also just need any widget in your project named canvas. There’s also a clear function you can call.
(() => {
var canvas = document.createElement('canvas');
var container = $axure('@canvas');
var containerEl = container.getElements()[0]
canvas.width = container.width();
canvas.height = container.height();
canvas.id = 'canvas';
containerEl.append(canvas);
var ctx = document.getElementById('canvas').getContext('2d');
var mousedown = false;
canvas.addEventListener('mousedown', ev => {
mousedown = true;
ctx.beginPath();
ctx.moveTo(ev.offsetX, ev.offsetY);
});
canvas.addEventListener('mousemove', ev => {
if (mousedown) {
ctx.lineTo(ev.offsetX, ev.offsetY);
ctx.stroke();
}
});
document.body.addEventListener('mouseup', ev => {
mousedown = false;
});
function clear() {
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.clear = clear;
})()
Hi, I tried to follow your hints adding the drawline.rp file to my project but I noticed that all the interactions of the box are set to “Nothing”; is this normal?
When I try to draw something, nothing appears. Sometimes I can see a little mark on the right like in this screen
Here is the live link if you want to test
Thanks 
Hey @nkrisc, could you post a .rp with the script in a OpenLink action? This doesn’t work for me in Axure 9…
Thanks!
Hi @freiand , I’m new of Axure and unfortunately I don’t know how to solve. I’m still stuck with this issue . If you find anything that can help (or another solution to get a signature) please inform me.
I don’t have access to Axure at the moment but you need to add an Open Link action, choose URL then paste the code above after javascript: in the URL field. You should place the Open Link action on the OnLoad event of a widget or the page itself so it executes immediately.
Hi @nkrisc,
Didn’t get it working either. Tried both with plugin and open link approach but no luck.
Hi @AntonMircea,
Thanks for sharing the details.
However, the RP file still doesn’t have the interaction and may be due to it the signature is not working.
Can you please post a screenshot for interactions or guide on which elements did you show/hide or move on mouse out event?
Trying this in 10 with no luck. Any tips @nkrisc?? If it’s still working for you, even in an older version could you please post a copy of your file with it in the load event?
Looks like the issue was the undocumented Axure API I was relying no longer works the it did, so I’ve modified to it to not use that:
It assume that somewhere on your page there’s an Axure element you’ve named @canvas. Also I’ve not specifically used touch events so I can’t speak to how well it work on touch devices, but there’s no reason it couldn’t be modified to properly handle touch events instead of mouse events.
(() => {
var canvas = document.createElement('canvas');
var container = document.querySelector('[data-label="@canvas"]');
var containerEl = container.children[0];
canvas.width = container.clientWidth;
canvas.height = container.clientHeight;
canvas.id = 'canvas';
containerEl.append(canvas);
var ctx = document.getElementById('canvas').getContext('2d');
var mousedown = false;
canvas.addEventListener('mousedown', ev => {
mousedown = true;
ctx.beginPath();
ctx.moveTo(ev.offsetX, ev.offsetY);
});
canvas.addEventListener('mousemove', ev => {
if (mousedown) {
ctx.lineTo(ev.offsetX, ev.offsetY);
ctx.stroke();
}
});
document.body.addEventListener('mouseup', ev => {
mousedown = false;
});
function clear() {
ctx.fillStyle = '#FFF';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
window.clear = clear;
})()