html5 canvas, add scrollbar on overflow

Question

Hello there i got a html canvas and i want to add a scrollbar just like any web page or a textarea, i used overflow: scroll; but it only shows the scrollbars and they are disabled (and i can't scroll)

this is the markup

<div class="ccsp-area">
    <canvas id="mainCanvas" width="900" height="500"></canvas>
</div>

and here is the css (scss)

 .ccsp-area {
   width: 90%;
   height: 100%;
   display: inline-block;
   canvas {
     display: inline-block;
     background-color: #fff;
     max-width: 100%   !important;
     overflow: scroll;
   }
 }

and finally this is the JS

var canvas = $("#mainCanvas");
var ctx = canvas[0].getContext('2d');
var targetSizeE = $(".ccsp-area");
var rwidth = targetSizeE.width() -200;
var rheight = targetSizeE.height() -80;
// no need to read more code after this stage
canvas.attr('width', rwidth);
canvas.attr('height', rheight);
ctx.beginPath();
ctx.moveTo(100 , 100);
ctx.lineTo(600, 600);
ctx.lineTo(600,100);
ctx.closePath();
ctx.lineWidth = 20;
ctx.strokeStyle = "rgba(10,220,50,1)";
ctx.fillStyle = "rgba(10,220,50,0.5)";
ctx.stroke();

a screen shot of the result result

as you can see, the scrollbars are disabled, and i can't scroll even when i have drawings inside the canvas which is more than the height of the canvas.

See Here: http://stackoverflow.com/questions/15461811/html-canvas-with-scrollbar — H Mirza, Jul 14 '16 at 06:32
i looked at it before i post this question, i don't want 2 scrollbars! and yet i can't scroll thro the canvas :( — J. Duo, Jul 14 '16 at 06:40
Canvas element has no content, so you can't overflow its content. As marked in the link given by @HMirza, rap your canvas in an outer div and don't set the oveflow property on the canvas itself. — Kaiido, Jul 14 '16 at 08:27
@kaiido the problem is the outer div which is the canvas parent div has the save width and height as the canvas, i will try what you said now — J. Duo, Jul 14 '16 at 08:35

score 0 · Answer 1 · edited Jul 14 '16 at 07:11

0

See the Link here

You can set overflow-x and overflow-y separately.

See more about overflow over at MDN

edited Jul 14 '16 at 07:11

vp_arth

14,461
4
37
66

answered Jul 14 '16 at 07:08

H Mirza

357
1
4
8

not working, tried what's written in the link and your answer – J. Duo Jul 14 '16 at 08:20
You can try looking at this, I think you need to dynamically set the size of the canvas object when the size changes. http://stackoverflow.com/questions/15385290/canvas-scrollbar-not-working – H Mirza Jul 14 '16 at 08:22

score 0 · Accepted Answer · edited Jul 14 '16 at 09:42

0

As the guy said, canvas has no content to overflow so the best way to do this is to set the canvas width and height to something really big maybe 2200 x 1500 (and you can change the height through js)

This is what your css should look like

.ccsp-area {
  width: 90%;
  height: 100%;
  display: inline-block;
  overflow: scroll;
  canvas {
    display: inline-block;
    background-color: #fff;
  }
}

Set the size from the html element not from the JS at your case (also feel free to remove the js code that sets the size of the canvas)

<canvas id="mainCanvas" width="900" height="500"></canvas>

edited Jul 14 '16 at 09:42

William Isted

11,641
4
30
45

answered Jul 14 '16 at 09:39

Sadeq Zebari

16

@Kaiido and why is it invalid ? – Sadeq Zebari Mar 24 '17 at 09:22
@SadeqZebari, wow been a while so hard to remember in which exact state of mind I was ;-) Hum I guess I missed it's scss, so as I said it's invalid css to have nested statements like that, but OP clearly states that it's scss. Apologies. – Kaiido Mar 24 '17 at 09:25

html5 canvas, add scrollbar on overflow

2 Answers2