MM to Pixels for JavaScript

Convert millimeters to JavaScript pixels for DOM sizing, Canvas rendering, and browser calculations using the standard 96 DPI reference.

JavaScript Conversion Input

Real-time sync active
JavaScript quick values
mm
px

JavaScript Pixel Result

37.7953 px
10 mm = 37.7953 px @ 96 DPI

Conversion Formula

px = mm × (DPI ÷ 25.4)
px = 10 × (96 ÷ 25.4)
px = 10 × 3.7795
px = 37.7953

JavaScript conversion value

Centimeters
1 cm
Inches
0.3937 in
Points (pt)
28.3465 pt
CSS rem (16px base)
2.3622 rem

How MM to Pixels for JavaScript Calculator Works

To convert millimeters to JavaScript pixels, this calculator uses the same 96 DPI CSS reference that browsers apply to all DOM measurements. JavaScript's pixel values in getBoundingClientRect(), Canvas API, and inline styles all use CSS pixels.

1

Enter the mm value

Enter a millimeter value. In browser JavaScript, physical mm measurements need to be converted to CSS pixels for use in DOM manipulation, Canvas drawing, or dynamic styling.

2

Fixed at 96 DPI

The DPI is locked at 96 because JavaScript operates within the browser's CSS pixel model (1in = 96px). For high-DPI rendering on Canvas, multiply by <code>window.devicePixelRatio</code> separately.

3

Read the pixel result

Read the pixel result. Use this value in JavaScript with: <code>element.style.width = px + 'px'</code>, or in Canvas: <code>ctx.fillRect(0, 0, px, px)</code>. The conversion formula in code is: <code>const px = mm * 96 / 25.4</code>.

When working with the HTML Canvas API on high-DPI displays, you need two conversions: first mm → CSS pixels (this calculator), then CSS pixels → device pixels (multiply by <code>window.devicePixelRatio</code>). Set the canvas element's CSS size in CSS pixels and its <code>width</code>/<code>height</code> attributes in device pixels for sharp rendering.

MM to Pixels for JavaScript Formula

The JavaScript mm to pixels formula is: const px = mm * 96 / 25.4. This evaluates to: px = mm × 3.7795. Use this in any browser JavaScript context.

px = mm × ( 96 ÷ 25.4 )

This mm to px formula has 2 variables and 1 fixed constant:

  • mm — the millimeter value to convert (your input variable)
  • 96 — the CSS reference pixels per inch, matching 1in = 96px in the browser
  • 25.4 — millimeters per inch, a physical constant

MM to Pixels for JavaScript Formula Examples

1 mm in JS pixels

px = 1 × (96 ÷ 25.4) px = 1 × 3.7795 px = 3.7795

10 mm in JS pixels

px = 10 × (96 ÷ 25.4) px = 10 × 3.7795 px = 37.7953

1 inch in JS pixels

px = 25.4 × (96 ÷ 25.4) px = 25.4 × 3.7795 px = 96

The reverse formula in JavaScript is: const mm = px * 25.4 / 96. For Canvas high-DPI rendering, the full pattern is: const cssPx = mm * 96 / 25.4; const devicePx = cssPx * window.devicePixelRatio;. Set canvas.width = devicePx and canvas.style.width = cssPx + 'px'.

MM to Pixels for JavaScript Conversion Chart

Reference table showing mm to CSS pixel values for JavaScript calculations. These values apply to DOM sizing, Canvas API, and any browser-based JavaScript measurement.

mm px @ 72 DPI px @ 96 DPI px @ 150 DPI px @ 300 DPI
0.5 1.4173 1.8898 2.9528 5.9055
1 2.8346 3.7795 5.9055 11.811
2 5.6693 7.5591 11.811 23.622
3 8.5039 11.3386 17.7165 35.4331
5 14.1732 18.8976 29.5276 59.0551
10 28.3465 37.7953 59.0551 118.1102
15 42.5197 56.6929 88.5827 177.1654
20 56.6929 75.5906 118.1102 236.2205
25 70.8661 94.4882 147.6378 295.2756
50 141.7323 188.9764 295.2756 590.5512
100 283.4646 377.9528 590.5512 1181.1024
210 595.2756 793.7008 1240.1575 2480.315
297 841.8898 1122.5197 1753.937 3507.874

In JavaScript, you can compute any value from this table with: <code>const px = mm * 96 / 25.4</code>. For dynamic conversions, wrap this in a utility function: <code>function mmToPx(mm) { return mm * 96 / 25.4; }</code>.