4

I'm trying to visualize some data on an HTML canvas and I'm facing an issue similar to this one. That is, the size of my data doesn't exactly match the size of my canvas.

In one instance I'd like to plot a 1024 point signal on a canvas that's 100px wide. (E.g., an audio waveform.)

In another instance I'd like to show a 1024 by 5000 point matrix on a canvas that's 100 px high by by 500 px wide. (E.g., an audio spectrogram.)

In both cases, I'll need to resample my data so that it fits on the canvas. Does anyone know of a library/toolkit/function in Javascript that can do this?

** EDIT **

I'm aware that there are many techniques I could use here. One possibility is to simply discard or duplicate data points. This would do in a pinch, but discarding/duplication is known to produce results that tend to look "jagged" or "blocky" (see here and here). I'd prefer to use a slightly more sophisticated algorithm that outputs smoother images such as Lanczos, bilinear or bicubic resampling. Any of these would meet my needs.

My question isn't about which algorithm to use, though, it's about whether any of them have been implemented in open-source javascript libraries. Surprisingly, I haven't been able to find much in JS. Coding my own resampling function is obviously an option, but I wanted to check with the SO community first to make sure I wasn't re-inventing the wheel.

(This answer gives a code listing that's very close to what I want, except that it operates directly on the canvas objects rather than the data arrays, and it forces the aspect ratios of the input and output to be the same. If nothing else is available, I can definitely work with this, but I was hoping for a solution that's a bit more general and flexible, along the lines of Matlab's resample.)

Community
  • 1
  • 1
dB'
  • 7,838
  • 15
  • 58
  • 101
  • do yo mean just sampling every nth value? That's part of the basics of loops/algorithms in any language. – FlavorScape Jun 29 '12 at 18:51
  • 1
    I don't think these kinds of algorithms have been created in the open-source community. Mostly because if you're using such algorithms, you're probably going to use something a little more powerful like Java, C#, C++, Python, R, or Matlab. I think you may have to implement your own library. – kevin628 Jun 29 '12 at 21:59

1 Answers1

1

use canvas scale

ctx.scale(xscale,yscale);

you can determine the scaling by calculating the rate between your canvas and the data

ctx.scale(canvas_x/data_x,canvas_y/data_y)
neu-rah
  • 1,662
  • 19
  • 32