Test

This page contains an HTML5 2D canvas port of the automated test suite for the canvas_ity library. See test.cpp for the original C++ version.

Examine the images below to see how your browser's canvas implementation renders each test and see how they relate to the results produced by the library (run the library's test harness with --pngs to get the images). Compare the code for the JavaScript and C++ tests line-by-line to see how the HTML5 API maps to the library's API and vice-versa.

scale_uniform

scale_non_uniform

rotate

Firefox (Skia)

Upper-left changes in apparent line density.

Chrome

Upper-left changes in apparent line density.

Safari

Jaggies show on one side of lines.

Edge (Chromium)

Upper-left changes in apparent line density.

translate

transform

Safari

Jaggies show on one side of lines.

transform_fill

transform_stroke

set_transform

Safari

Jaggies show on one side of lines.

global_alpha

global_composite_operation

shadow_color

shadow_offset

shadow_offset_offscreen

shadow_blur

shadow_blur_offscreen

shadow_blur_composite

Firefox (Skia)

Destination-atop layers incorrectly.

Safari

Destination-atop layers incorrectly.

line_width

line_width_angular

line_cap

line_cap_offscreen

line_join

line_join_offscreen

miter_limit

Firefox (Skia)

Miters are missing on thin lines.

Chrome

Miters are missing on thin lines.

Edge (Chromium)

Miters are missing on thin lines.

line_dash_offset

line_dash

line_dash_closed

Chrome

Outer rectangle is not closed in upper left.

Safari

Neither rectangle is closed in upper left.

Edge (Chromium)

Outer rectangle is not closed in upper left.

line_dash_overlap

line_dash_offscreen

Firefox (Skia)

Dashes start slightly too soon.

Firefox (Direct2D)

Dashes start slightly too soon.

Safari

Dashes start slightly too soon.

color

linear_gradient

radial_gradient

color_stop

Chrome

Gradient object is not live.

Safari

Gradient object is not live.
Does not render anything.

Edge (Chromium)

Gradient object is not live.

pattern

Firefox (Skia)

Filtering does not consistently wrap.
Patterns with repeat-x or repeat-y are invisible.

Firefox (Direct2D)

Filtering does not consistently wrap.
Patterns with repeat-x or repeat-y are invisible.

Chrome

Filtering does not consistently wrap.
Fades from opaque to transparent where not repeating.

Safari

Filtering does not wrap.

Edge (Chromium)

Filtering does not consistently wrap.
Fades from opaque to transparent where not repeating.

begin_path

move_to

close_path

line_to

Firefox (Direct2D)

Upper miter is missing.

quadratic_curve_to

Firefox (Skia)

Cusp on lower left curve is rounded.

Firefox (Direct2D)

Cusp on lower left curve is rounded.

Chrome

Cusp on lower left curve is rounded.

Safari

Lower left curve is missing.

Edge (Chromium)

Cusp on lower left curve is rounded.

bezier_curve_to

Firefox (Skia)

Cusp on left curve is rounded.

Firefox (Direct2D)

Cusp on left curve is rounded.

Chrome

Cusp on left curve is rounded.

Edge (Chromium)

Cusp on left curve is rounded.

arc_to

Chrome

Attempts to find arc when transform is non-invertible.

Edge (Chromium)

Attempts to find arc when transform is non-invertible.

arc

Firefox (Direct2D)

Degenerate arcs show as dots.
Miters are missing on some corners.

rectangle

Firefox (Direct2D)

Degenerate center rectangle shows as dot.

Safari

Negative width or height rectangles do not wind correctly.

fill

fill_rounding

fill_converging

Firefox (Skia)

Center area is very gritty.

Firefox (Direct2D)

Center area is very gritty.

Chrome

Center area is very gritty.

Edge (Chromium)

Center area is very gritty.

fill_zone_plate

Firefox (Skia)

Outer area is very gritty.

Firefox (Direct2D)

Outer area is very gritty.

Chrome

Outer area is very gritty.

Safari

Top and bottom areas have a slight vertical distortion.

Edge (Chromium)

Outer area is very gritty.

stroke

stroke_wide

Firefox (Skia)

Lower-right curve has semi-circular indentation.

Chrome

Lower-right curve has semi-circular indentation.

Safari

Upper-right curve flattened on top and has holes.
Lower-left curve flattened on top.
Lower-right curve has semi-circular indentation.

Edge (Chromium)

Lower-right curve has semi-circular indentation.

stroke_inner_join

Firefox (Skia)

There are no inner joins.
Smooth curves pinch to a point and have tails.

Firefox (Direct2D)

There are no inner joins.

Chrome

There are no inner joins.
Smooth curves pinch to a point and have tails.

Safari

There are no inner joins.
Smooth curves pinch to a point and have tails.

Edge (Chromium)

There are no inner joins.
Smooth curves pinch to a point and have tails.

stroke_spiral

stroke_long

clip

clip_winding

is_point_in_path

Firefox (Skia)

Four points exactly on the path are not considered inside.

Firefox (Direct2D)

Four points exactly on the path are not considered inside.

Chrome

Four points exactly on the path are not considered inside.

Safari

Three points exactly on the path are not considered inside.

Edge (Chromium)

Four points exactly on the path are not considered inside.

is_point_in_path_offscreen

Firefox (Skia)

Four points exactly on the path are not considered inside.

Firefox (Direct2D)

Four points exactly on the path are not considered inside.

Chrome

Two points exactly on the path are not considered inside.

Safari

One point exactly on the path is not considered inside.

Edge (Chromium)

Two points exactly on the path are not considered inside.

clear_rectangle

Chrome

Clearing is not antialiased.

Edge (Chromium)

Clearing is not antialiased.

fill_rectangle

stroke_rectangle

Safari

Center lines are extra heavy.
Jaggies show on one side of lines in small squares.

text_align

text_baseline

Safari

Not using normalized sTypo metrics.

font

Firefox (Skia)

Fonts with only cmap subtable formats 4 or 0 are rejected.

Firefox (Direct2D)

Fonts with only cmap subtable formats 4 or 0 are rejected.

Chrome

Fonts with only cmap subtable formats 4 or 0 are rejected.

Edge (Chromium)

Fonts with only cmap subtable formats 4 or 0 are rejected.

fill_text

Firefox (Skia)

Rotation on compound glyph components is broken by max width.
Max width transforms fills.

Firefox (Direct2D)

Max width transforms fills.

Chrome

Max width transforms fills.

Safari

Shadow positions are misaligned.
Max width does not affect shadow.

Edge (Chromium)

Max width transforms fills.

stroke_text

Firefox (Skia)

Rotation on compound glyph components is broken by max width.
Max width transforms strokes.

Firefox (Direct2D)

Max width transforms strokes.

Chrome

Max width transforms strokes.

Safari

Max width transforms strokes.

Edge (Chromium)

Max width transforms strokes.

measure_text

draw_image

Firefox (Skia)

Large image shows banding.

draw_image_matted

Firefox (Skia)

Resampling shows banding.

get_image_data

put_image_data

save_restore

example_button

example_smiley

example_knot

example_icon

example_illusion

example_star

example_neon