[Question] [VueJS] How can I access the canvas object reference programmatically?

[I-NOZex]

I've saw in one of your code examples that you access this way:

const canvas = (this.$refs.canvas as any).nativeView;

I'm not using typescript, so I can't enforce the type, but this should work:

const canvas = this.$refs.canvas.nativeView;

Unfortunately that doesn't give me access to the canvas functions, like drawing and so on...

Can you help?

[farfromrefug]

By doing this you access the CanvasView not the canvas

You need to either use @draw="onDraw" to access the canvas and redraw on every draw call Or use shapes like this

 <CanvasView row="0" :density="density" ref="canvas" width="100%" backgroundColor="#44ff0000">
                <Shapes>
                    <Rectangle shadow="3 3 black" strokeColor="red" :fillColor="shapeColor" strokeWidth="6" :left="shapeLeft" top="10" :width="shapeLeft + '%'" height="50%" />
                    <Arc color="yellow" :antiAlias="antiAlias" shadow="0 0 10 red" paintStyle="stroke" strokeCap="round" strokeWidth="10" left="20" top="20" :width="arcWidth" :height="arcWidth" startAngle="0" :sweepAngle="sweepAngle" />
                    <Text  :antiAlias="antiAlias" color="green" top="50" text="test Text" fontSize="50" />
                    <Line  :antiAlias="antiAlias" color="yellow"  startX="10" startY="10" stopX="505" stopY="50"  strokeCap="round"  strokeJoin="round" strokeWidth="8" dash="1 10 0"/>
                    <Line  :antiAlias="antiAlias" color="#1C2738"  startX="10%" startY="50%" stopX="90%" stopY="50%"  strokeCap="round"  strokeJoin="round" strokeWidth="1" dash="1 3 0"/>
                </Shapes>
            </CanvasView>

The example where i use

const canvas = this.$refs.canvas.nativeView;

is to only force redraw when i change a property in the animation example.

You get it?

[I-NOZex]

Yes, I see now how it's supposed to work. Thank you! 👍