Home/ Questions/Q 8435255
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T06:51:56+00:00

I’m trying to port a TclTK program I wrote 20 years ago to HTML5.

  • 0

I’m trying to port a TclTK program I wrote 20 years ago to HTML5.

After hours of frustation, I learned that when you “scale” or
“translate” HTML5’s canvas element, it only applies to future
drawings, not items already on the canvas.

This is the opposite of TclTK, where items already on the canvas are
scaled/translated instead.

Short of creating a draw/redraw loop (where I clear the canvas and
redraw all the objects myself when I want to scale/translate), is
there anyway to make HTML5’s canvas element behave like TclTK’s?

Or am I missing something big?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The Canvas 2D Context is based around pixel-wise image manipulations — it is not a “retained mode” graphics interface as you are apparently familiar with. There literally is no record of your graphics for it to redraw. If you want to change the graphics, you have to redraw them somehow.

    Everything is redrawing, in the end (though the redrawing may be hidden from your code), but there are ways to reduce the amount of work you have to do. Here are some options, roughly in order of amount of change you’ll have to do to your code (and roughly in order of improved quality/performance):

    • Draw your graphics on the canvas, then scale and translate the canvas itself using CSS properties (not the width and height attributes of the canvas, which will clear it). This will rescale the image, possibly losing quality, since you’re not drawing it anew optimized for the current scale.

    • Draw your graphics on the canvas, then export them into an ImageData or a data URL, then when needed redraw that onto the canvas. Again, may lose quality.

    The above two are essentially kludges to keep using the canvas code you’ve already written. To get a proper system like you describe TK as being, you want to:

    • Build your own scene graph: Create a set of objects like Circle, Line, etc. which represent graphics, and containers for those which store transform attributes like scale and position. Then write routines to walk this graph and execute the appropriate drawing commands, whenever you need to redraw.

    • Use SVG instead. SVG is a language for vector graphics which, in modern browsers, you can embed directly in your HTML, and manipulate in JavaScript just like you would the rest of your page. In SVG, you can simply change a scale attribute and get the change you expect to see.

      (The previous option is basically reinventing a small amount of SVG.)

    • 0