How to use canvas with Vue in component? [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed last year.

Improve this question

I'm tyring to add canvas to my Vue component this way, but it isn't work.

Result of code on screenshot. There is no erros and warnings in console.

I tried to do get canvas document.getElementById("canvas") with <canvas id="canvas"></canvas> and it dosn't work too.

How to use canvas in Vue component?

<template>
    <div>
        <canvas
            ref="canvas"
        ></canvas>
    </div>
</template>

<script>
export default {
    name: 'levelOne',
    data: () => ({
    }),
    methods:{
        func(){
            let cvn = this.$refs.canvas;
            let ctx = cvn.getContext("2d");  
            let bg = new Image();
            bg.src = "../assets/bg.png";
            bg.onload = function() {
                    ctx.drawImage(bg, 0 ,0);
            };
        }
    },
    mounted(){
        this.func();
    }
}
</script>

To clarify... Did you try getElemetById or getElementById? There's a small typo — byxor
– byxor, Commented Jan 7, 2020 at 17:02
@byxor I'm sorry, this is a typo only in question. I tried getElementById — AlexIdest
– AlexIdest, Commented Jan 7, 2020 at 17:05
Perhaps you're fetching the canvas successfully, but the image isn't loading. Can you render other things on the canvas, like text? e.g. ctx.font = '48px serif'; ctx.fillText('Hello world', 10, 50); — byxor
– byxor, Commented Jan 7, 2020 at 17:09
@byxor, yes it's work for text, but where is a problem if path to .png is correct? — AlexIdest
– AlexIdest, Commented Jan 7, 2020 at 17:12

Fab · Accepted Answer · 2020-01-07 17:33:01Z

3

You can try in this way:

<script>
import myImage from "./assets/bg.png";

export default {
    name: 'levelOne',
    data: () => ({
    }),
    methods:{
        func(){
            let cvn = this.$refs.canvas;
            let ctx = cvn.getContext("2d");  
            let bg = new Image();
            bg.src = myImage;
            bg.onload = function() {
                    ctx.drawImage(bg, 0 ,0);
            };
        }
    },
    mounted(){
        this.func();
    }
}
</script>

or simply move your image within the public folder and then:

bg.src = "/bg.png";

answered Jan 7, 2020 at 17:33

Fab

4,6572 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AlexIdest Over a year ago

Thank you, it works! But moving bg.png to the same folder stiil dosn't. You know why? This is very strange

Fab Over a year ago

do you mean the public folder? However, here you can find more informations: cli.vuejs.org/guide/…

Collectives™ on Stack Overflow

How to use canvas with Vue in component? [closed]

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related