0

I'm making a UI in Angular6 where I have a list that occupies the left third of the screen with selectable entries that upon selection reveal additional data of that entry.

the additional data does not move but the the selected line in the entries can because the list is scrollable and also selecting it will change which line is highlighted obviously.

I want to make it visually clear to the user that the additional data he is seeing corresponds to the entry selected in the list.

here's what I have now : enter image description here as you can see I've already helped out the user visually by highlighting the entry in the list and the whole additional data view in the same light blue

and here's my attempt at sealing the deal in terms of the view's clarity :

<!DOCTYPE html>
<html>

<body>

  <canvas id="myCanvas" width="400" height="180">
Your browser does not support the HTML5 canvas tag.</canvas>

  <script>
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0, 20);
    ctx.lineTo(400, 180);
    ctx.lineTo(400, 40);
    ctx.lineTo(0, 0);
    ctx.fillStyle = '#9ec7e2';
    ctx.fill();
  </script>

  <p><strong>Note:</strong> The canvas tag is not supported in Internet Explorer 8 and earlier versions.</p>

</body>

</html>

But I'm facing here a challenge I've never faced before : I need it to be dynamic and fluid.

I know I could JQuery-watch both select and scroll and also JQuery get X-Y coordinates of top and bottom corners of relevant divs, then redraw the canvas on every scroll and select call but that sounds extra poor performance-wise, and with a high probability of flashing (re-draws) while I scroll.

not to mention this all sounds extra clunky and poor execution,

Plus I'm fairly certain any resizing of the window or any other easy test would break the illusion.

Isn't there a new more "CSS3-SASS-SVG-Angular6" approach?

tatsu
  • 2,316
  • 7
  • 43
  • 87
  • 1
    "then redraw the canvas on every scroll and select call but that sounds extra poor performance-wise, and with a high probability of flashing (re-draws) while I scroll." trying searching "javscript canvas double buffering" on Stackoverflow or Google this one on Stackoverflow ( https://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering ) might help you out – Raymond Nijland Sep 03 '18 at 13:07
  • thanks @RaymondNijland , that link lead to a lot of other interesting links and jsfiddles but I can't shake this nagging feeling the canvas approach will be inferior to the svg approach. I've started a codepen, take a look : https://codepen.io/tatsujb/pen/OomWzW – tatsu Sep 03 '18 at 16:21
  • 1
    well i know for a fact the canvas element in some browsers can (some browser require the user to selected that option tho) be GPU accelerated which SVG elements are not – Raymond Nijland Sep 03 '18 at 16:33

0 Answers0