如何在 canvas 上绘制矩形

Question

i'm receving from webserver part of image, let say 600px x 600px, which i'm drawing in canvas.

The real size of image is let say 600px x 1200px(height).

I need to create scrollbar over canvas. After i will drag scrollbar i will count, how many pixels i've moved scrollbar, send to server information and i will receive other portion of picture (600x600px) but scrolled. The mechanism is done by me, but i need to draw scrollbar over canvas.

<b-card>
  <div id="image">
    <canvas
      id="canvasId"
      ref="canRef"
      @mousedown="clickMe"
      @mouseup="scrollOff"
      @mousemove="scrollMe"
    />
  </div>
</b-card>

How to draw scroll bar on the right side of canvas?

Answer 1

First, fetch the canvas element and its context

const canvas = document.getElementById('canvasId');
const ctx = canvas.getContext('2d');

Then, draw the rectangle using the stroke() function

ctx.beginPath();
ctx.rect(0, 0, 150, 100); //change to the coordinates you want
ctx.stroke();

You can control the color and the width of the line using:

ctx.lineWidth = 10;
ctx.strokeStyle = '#ff0000';