diff --git a/src/browser/canvas/root.zig b/src/browser/canvas/root.zig
index 5bd977e5..1d3f62b0 100644
--- a/src/browser/canvas/root.zig
+++ b/src/browser/canvas/root.zig
@@ -1,11 +1,12 @@
 //! Canvas API.
 //! https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API
 
+const CanvasRenderingContext2D = @import("CanvasRenderingContext2D.zig");
 const WebGLRenderingContext = @import("WebGLRenderingContext.zig");
-const ExtensionType = WebGLRenderingContext.Extension.Type;
+const Extension = WebGLRenderingContext.Extension;
 
 pub const Interfaces = .{
-    @import("CanvasRenderingContext2D.zig"),
+    CanvasRenderingContext2D,
     WebGLRenderingContext,
-    ExtensionType.WEBGL_debug_renderer_info,
+    Extension.Type.WEBGL_debug_renderer_info,
 };
diff --git a/src/tests/html/canvas.html b/src/tests/html/canvas.html
index a0844b1d..dc900254 100644
--- a/src/tests/html/canvas.html
+++ b/src/tests/html/canvas.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <script src="../testing.js"></script>
 
-<script id=canvas>
+<script id=CanvasRenderingContext2D>
 {
   const element = document.createElement("canvas");
   const ctx = element.getContext("2d");
@@ -11,7 +11,7 @@
 }
 </script>
 
-<script id=canvas#fillStyle>
+<script id=CanvasRenderingContext2D#fillStyle>
 {
   const element = document.createElement("canvas");
   const ctx = element.getContext("2d");
@@ -25,6 +25,12 @@
   // No changes made if color is invalid.
   ctx.fillStyle = "invalid-color";
   testing.expectEqual(ctx.fillStyle, "#663399");
+  ctx.fillStyle = "#fc0";
+  testing.expectEqual(ctx.fillStyle, "#ffcc00");
+  ctx.fillStyle = "#ff0000";
+  testing.expectEqual(ctx.fillStyle, "#ff0000");
+  ctx.fillStyle = "#fF00000F";
+  testing.expectEqual(ctx.fillStyle, "rgba(255, 0, 0, 0.06)");
 }
 </script>
 
