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??