Load Image Canvas and Printed Vanilla Js

 

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css">

<canvas id="card_canvas"></canvas>

<hr>

<button onclick="print()">Print</button>

<script>

function print(){

const cv = document.getElementById("card_canvas");

const url = cv.toDataURL("image/jpeg");

            printJS({printable: url, type: 'image', base64: true, imageStyle: 'width:100%;height:100%;'});

}

    function updateCanvas(){

        var canv = document.getElementById('card_canvas');

        var context = canv.getContext('2d');

        canv.width = window.innerWidth;

        canv.height = 930;

        var image = new Image();

        image.src = 'sertifikat.jpeg';

        image.addEventListener("load", function () {

            context.drawImage(image, 0, 0, window.innerWidth, 930);

            context.font = "bold 45px Calibri";

            context.fillStyle = "Red";

            context.fillText("rifqi", 480, 390);

        });

    }

    window.addEventListener("load",updateCanvas)

</script>