diff --git a/modules/canvaskit/CHANGELOG.md b/modules/canvaskit/CHANGELOG.md
index 3ef0180..7766718 100644
--- a/modules/canvaskit/CHANGELOG.md
+++ b/modules/canvaskit/CHANGELOG.md
@@ -6,12 +6,31 @@
 
 ## [Unreleased]
 
+### Added
+ - Support for wide-gamut color spaces DisplayP3 and AdobeRGB. However, correct representation on a
+   WCG monitor requires that the browser is rendering everything to the DisplayP3 or AdobeRGB
+   profile, since there is not yet any way to indicate to the browser that a canvas element has a
+   non-sRGB color space. See color support example in extra.html. Only supported for WebGL2 backed
+   surfaces.
+ - Added `SkSurface.reportBackendType` which returns either 'CPU' or 'GPU'.
+ - Added `SkSurface.imageInfo` which returns an ImageInfo object describing the size and color
+   properties of the surface. colorSpace is added to ImageInfo everywhere it is used.
+
 ### Changed
-  - We now compile/ship with Emscripten v1.39.16.
+ - We now compile/ship with Emscripten v1.39.16.
+ - `CanvasKit.MakeCanvasSurface` accepts a new enum specifying one of the three color space and
+   pixel format combinations supported by CanvasKit. 
+ - all `_Make*Shader` functions now accept a color space argument at the end. leaving it off or
+   passing null makes it behave as it did before, defaulting to sRGB
+ - `SkPaint.setColor` accepts a new color space argument, defaulting to sRGB.
 
 ### Breaking
  - `CanvasKitInit(...)` now directly returns a Promise. As such, `CanvasKitInit(...).ready()`
    has been removed.
+ - `CanvasKit.MakeCanvasSurface` no longer accepts width/height arguments to override those on
+   the canvas element. Use the canvas element's width/height attributes to dictate the size of
+   the drawing area, and use CSS width/height to set the size it will appear on the page
+   (it is rescaled after drawing when css sizing applies).
 
 ## [0.15.0] - 2020-05-14
 
diff --git a/modules/canvaskit/canvaskit/example.html b/modules/canvaskit/canvaskit/example.html
index c10b5d0..7aa1dcb 100644
--- a/modules/canvaskit/canvaskit/example.html
+++ b/modules/canvaskit/canvaskit/example.html
@@ -1125,6 +1125,7 @@
       height: 50,
       alphaType: CanvasKit.AlphaType.Premul,
       colorType: CanvasKit.ColorType.RGBA_8888,
+      colorSpace: CanvasKit.SkColorSpace.SRGB,
     });
 
     if (!subSurface) {
diff --git a/modules/canvaskit/canvaskit/extra.html b/modules/canvaskit/canvaskit/extra.html
index 1d1882d..f932231 100644
--- a/modules/canvaskit/canvaskit/extra.html
+++ b/modules/canvaskit/canvaskit/extra.html
@@ -35,8 +35,9 @@
 <h2> 3D perspective transformations </h2>
 <canvas id=camera3d width=500 height=500></canvas>
 
-<h2> Use of offscreen surfaces </h2>
-<canvas id=surfaces width=500 height=500></canvas>
+<h2> Support for extended color spaces </h2>
+<a href="chrome://flags/#force-color-profile">Force P3 profile</a>
+<canvas id=colorsupport width=300 height=300></canvas>
 
 <script type="text/javascript" src="/node_modules/canvaskit/bin/canvaskit.js"></script>
 
@@ -79,7 +80,7 @@
 
     SkpExample(CanvasKit, skpData);
 
-    SurfaceAPI1(CanvasKit);
+    ColorSupport(CanvasKit);
   });
 
   fetch(cdn + 'lego_loader.json').then((resp) => {
@@ -240,76 +241,6 @@
    "Bindings": []
 };
 
-  function SurfaceAPI1(CanvasKit) {
-    const surface = CanvasKit.MakeCanvasSurface('surfaces');
-    if (!surface) {
-      console.error('Could not make surface');
-      return;
-    }
-    console.log('SurfaceAPI1 top surface type = '+surface.reportBackendType() );
-    const context = CanvasKit.currentContext();
-    const canvas = surface.getCanvas();
-
-    //create a subsurface as a temporary workspace.
-    const subSurface = surface.makeSurface({
-      width: 50,
-      height: 50,
-      alphaType: CanvasKit.AlphaType.Premul,
-      colorType: CanvasKit.ColorType.RGBA_8888,
-    });
-
-    if (!subSurface) {
-      console.error('Could not make subsurface');
-      return;
-    }
-    console.log('SurfaceAPI1 subSurface type = '+subSurface.reportBackendType() );
-
-    // draw a small "scene"
-    const paint = new CanvasKit.SkPaint();
-    paint.setColor(CanvasKit.Color(139, 228, 135, 0.95)); // greenish
-    paint.setStyle(CanvasKit.PaintStyle.Fill);
-    paint.setAntiAlias(true);
-
-    const subCanvas = subSurface.getCanvas();
-    subCanvas.clear(CanvasKit.BLACK);
-    subCanvas.drawRect(CanvasKit.LTRBRect(5, 15, 45, 40), paint);
-
-    paint.setColor(CanvasKit.Color(214, 93, 244)); // purplish
-    for (let i = 0; i < 10; i++) {
-      const x = Math.random() * 50;
-      const y = Math.random() * 50;
-
-      subCanvas.drawOval(CanvasKit.XYWHRect(x, y, 6, 6), paint);
-    }
-
-    // Snap it off as an SkImage - this image will be in the form the
-    // parent surface prefers (e.g. Texture for GPU / Raster for CPU).
-    const img = subSurface.makeImageSnapshot();
-
-    // clean up the temporary surface
-    subSurface.delete();
-    paint.delete();
-
-    // Make it repeat a bunch with a shader
-    const pattern = img.makeShader(CanvasKit.TileMode.Repeat, CanvasKit.TileMode.Mirror);
-    const patternPaint = new CanvasKit.SkPaint();
-    patternPaint.setShader(pattern);
-
-    let i = 0;
-
-    function drawFrame() {
-      i++;
-      CanvasKit.setCurrentContext(context);
-      canvas.clear(CanvasKit.WHITE);
-
-      canvas.drawOval(CanvasKit.LTRBRect(i % 60, i % 60, 300 - (i% 60), 300 - (i % 60)), patternPaint);
-      surface.flush();
-      window.requestAnimationFrame(drawFrame);
-    }
-    window.requestAnimationFrame(drawFrame);
-
-  }
-
   function ParagraphAPI1(CanvasKit, fontData) {
     if (!CanvasKit || !fontData) {
       return;
@@ -890,4 +821,30 @@
 
     surface.requestAnimationFrame(drawFrame);
   }
+
+  function ColorSupport(CanvasKit) {
+    const surface = CanvasKit.MakeCanvasSurface('colorsupport', CanvasKit.SkColorSpace.ADOBE_RGB);
+    if (!surface) {
+      console.error('Could not make surface');
+      return;
+    }
+    const canvas = surface.getCanvas();
+
+    // If the surface is correctly initialized with a higher bit depth color type,
+    // And chrome is compositing it into a buffer with the P3 color space,
+    // then the inner round rect should be distinct and less saturated than the full red background.
+    // Even if the monitor it is viewed on cannot accurately represent that color space.
+
+    let red = CanvasKit.Color4f(1, 0, 0, 1);
+    let paint = new CanvasKit.SkPaint();
+    paint.setColor(red, CanvasKit.SkColorSpace.ADOBE_RGB);
+    canvas.drawPaint(paint);
+    paint.setColor(red, CanvasKit.SkColorSpace.DISPLAY_P3);
+    canvas.drawRoundRect(CanvasKit.LTRBRect(50, 50, 250, 250), 30, 30, paint);
+    paint.setColor(red, CanvasKit.SkColorSpace.SRGB);
+    canvas.drawRoundRect(CanvasKit.LTRBRect(100, 100, 200, 200), 30, 30, paint);
+
+    surface.flush();
+    surface.delete();
+  }
 </script>
diff --git a/modules/canvaskit/canvaskit_bindings.cpp b/modules/canvaskit/canvaskit_bindings.cpp
index 5dfcf4d..32f344d 100644
--- a/modules/canvaskit/canvaskit_bindings.cpp
+++ b/modules/canvaskit/canvaskit_bindings.cpp
@@ -12,6 +12,7 @@
 #include "include/core/SkCanvas.h"
 #include "include/core/SkColor.h"
 #include "include/core/SkColorFilter.h"
+#include "include/core/SkColorSpace.h"
 #include "include/core/SkData.h"
 #include "include/core/SkDrawable.h"
 #include "include/core/SkEncodedImageFormat.h"
@@ -109,13 +110,29 @@
     int height;
     SkColorType colorType;
     SkAlphaType alphaType;
-    // TODO color spaces?
+    sk_sp<SkColorSpace> colorSpace;
 };
 
 SkImageInfo toSkImageInfo(const SimpleImageInfo& sii) {
-    return SkImageInfo::Make(sii.width, sii.height, sii.colorType, sii.alphaType);
+    return SkImageInfo::Make(sii.width, sii.height, sii.colorType, sii.alphaType, sii.colorSpace);
 }
 
+// Set the pixel format based on the colortype.
+// These degrees of freedom are removed from canvaskit only to keep the interface simpler.
+struct ColorSettings {
+    ColorSettings(sk_sp<SkColorSpace> colorSpace) {
+        if (colorSpace == nullptr || colorSpace->isSRGB()) {
+            colorType = kRGBA_8888_SkColorType;
+            pixFormat = GL_RGBA8;
+        } else {
+            colorType = kRGBA_F16_SkColorType;
+            pixFormat = GL_RGBA16F;
+        }
+    };
+    SkColorType colorType;
+    GrGLenum pixFormat;
+};
+
 #ifdef SK_GL
 sk_sp<GrContext> MakeGrContext(EMSCRIPTEN_WEBGL_CONTEXT_HANDLE context)
 {
@@ -131,31 +148,27 @@
     return grContext;
 }
 
-sk_sp<SkSurface> MakeOnScreenGLSurface(sk_sp<GrContext> grContext, int width, int height) {
+sk_sp<SkSurface> MakeOnScreenGLSurface(sk_sp<GrContext> grContext, int width, int height,
+    sk_sp<SkColorSpace> colorSpace) {
     glClearColor(0, 0, 0, 0);
     glClearStencil(0);
     glClear(GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
 
-
     // Wrap the frame buffer object attached to the screen in a Skia render
     // target so Skia can render to it
     GrGLint buffer;
     glGetIntegerv(GL_FRAMEBUFFER_BINDING, &buffer);
     GrGLFramebufferInfo info;
     info.fFBOID = (GrGLuint) buffer;
-    SkColorType colorType;
 
     GrGLint stencil;
     glGetIntegerv(GL_STENCIL_BITS, &stencil);
 
-    info.fFormat = GL_RGBA8;
-    colorType = kRGBA_8888_SkColorType;
-
+    const auto colorSettings = ColorSettings(colorSpace);
+    info.fFormat = colorSettings.pixFormat;
     GrBackendRenderTarget target(width, height, 0, stencil, info);
-
     sk_sp<SkSurface> surface(SkSurface::MakeFromBackendRenderTarget(grContext.get(), target,
-                                                                    kBottomLeft_GrSurfaceOrigin,
-                                                                    colorType, nullptr, nullptr));
+        kBottomLeft_GrSurfaceOrigin, colorSettings.colorType, colorSpace, nullptr));
     return surface;
 }
 
@@ -758,16 +771,17 @@
         return SkImage::MakeRasterData(info, pixelData, rowBytes);
     }), allow_raw_pointers());
     function("_MakeLinearGradientShader", optional_override([](SkPoint start, SkPoint end,
-                                uintptr_t /* SkColor4f*  */ cPtr, uintptr_t /* SkScalar*  */ pPtr,
+                                uintptr_t /* SkColor4f*  */ cPtr,
+                                uintptr_t /* SkScalar*  */ pPtr,
                                 int count, SkTileMode mode, uint32_t flags,
-                                uintptr_t /* SkScalar*  */ mPtr)->sk_sp<SkShader> {
+                                uintptr_t /* SkScalar*  */ mPtr,
+                                sk_sp<SkColorSpace> colorSpace)->sk_sp<SkShader> {
         SkPoint points[] = { start, end };
         // See comment above for uintptr_t explanation
         const SkColor4f*  colors  = reinterpret_cast<const SkColor4f*>(cPtr);
         const SkScalar* positions = reinterpret_cast<const SkScalar*>(pPtr);
         OptionalMatrix localMatrix(mPtr);
-        // TODO(nifong): do not assume color space. Support and test wide gamut color gradients
-        return SkGradientShader::MakeLinear(points, colors, SkColorSpace::MakeSRGB(), positions, count,
+        return SkGradientShader::MakeLinear(points, colors, colorSpace, positions, count,
                                                 mode, flags, &localMatrix);
     }), allow_raw_pointers());
 #ifdef SK_SERIALIZE_SKP
@@ -781,42 +795,48 @@
     }), allow_raw_pointers());
 #endif
     function("_MakeRadialGradientShader", optional_override([](SkPoint center, SkScalar radius,
-                                uintptr_t /* SkColor4f*  */ cPtr, uintptr_t /* SkScalar*  */ pPtr,
+                                uintptr_t /* SkColor4f*  */ cPtr,
+                                uintptr_t /* SkScalar*  */ pPtr,
                                 int count, SkTileMode mode, uint32_t flags,
-                                uintptr_t /* SkScalar*  */ mPtr)->sk_sp<SkShader> {
+                                uintptr_t /* SkScalar*  */ mPtr,
+                                sk_sp<SkColorSpace> colorSpace)->sk_sp<SkShader> {
         // See comment above for uintptr_t explanation
         const SkColor4f*  colors  = reinterpret_cast<const SkColor4f*>(cPtr);
         const SkScalar* positions = reinterpret_cast<const SkScalar*>(pPtr);
         OptionalMatrix localMatrix(mPtr);
-        return SkGradientShader::MakeRadial(center, radius, colors, SkColorSpace::MakeSRGB(), positions, count,
+        return SkGradientShader::MakeRadial(center, radius, colors, colorSpace, positions, count,
                                             mode, flags, &localMatrix);
     }), allow_raw_pointers());
     function("_MakeSweepGradientShader", optional_override([](SkScalar cx, SkScalar cy,
-                                uintptr_t /* SkColor4f*  */ cPtr, uintptr_t /* SkScalar*  */ pPtr,
+                                uintptr_t /* SkColor4f*  */ cPtr,
+                                uintptr_t /* SkScalar*  */ pPtr,
                                 int count, SkTileMode mode,
                                 SkScalar startAngle, SkScalar endAngle,
                                 uint32_t flags,
-                                uintptr_t /* SkScalar*  */ mPtr)->sk_sp<SkShader> {
+                                uintptr_t /* SkScalar*  */ mPtr,
+                                sk_sp<SkColorSpace> colorSpace)->sk_sp<SkShader> {
         // See comment above for uintptr_t explanation
         const SkColor4f*  colors  = reinterpret_cast<const SkColor4f*>(cPtr);
         const SkScalar* positions = reinterpret_cast<const SkScalar*>(pPtr);
         OptionalMatrix localMatrix(mPtr);
-        return SkGradientShader::MakeSweep(cx, cy, colors, SkColorSpace::MakeSRGB(), positions, count,
+        return SkGradientShader::MakeSweep(cx, cy, colors, colorSpace, positions, count,
                                            mode, startAngle, endAngle, flags,
                                            &localMatrix);
     }), allow_raw_pointers());
     function("_MakeTwoPointConicalGradientShader", optional_override([](
                                 SkPoint start, SkScalar startRadius,
                                 SkPoint end, SkScalar endRadius,
-                                uintptr_t /* SkColor4f*  */ cPtr, uintptr_t /* SkScalar*  */ pPtr,
+                                uintptr_t /* SkColor4f*  */ cPtr,
+                                uintptr_t /* SkScalar*  */ pPtr,
                                 int count, SkTileMode mode, uint32_t flags,
-                                uintptr_t /* SkScalar*  */ mPtr)->sk_sp<SkShader> {
+                                uintptr_t /* SkScalar*  */ mPtr,
+                                sk_sp<SkColorSpace> colorSpace)->sk_sp<SkShader> {
         // See comment above for uintptr_t explanation
         const SkColor4f*  colors  = reinterpret_cast<const SkColor4f*> (cPtr);
         const SkScalar* positions = reinterpret_cast<const SkScalar*>(pPtr);
         OptionalMatrix localMatrix(mPtr);
         return SkGradientShader::MakeTwoPointConical(start, startRadius, end, endRadius,
-                                                     colors, SkColorSpace::MakeSRGB(), positions, count, mode,
+                                                     colors, colorSpace, positions, count, mode,
                                                      flags, &localMatrix);
     }), allow_raw_pointers());
 
@@ -1257,8 +1277,9 @@
         .function("setAntiAlias", &SkPaint::setAntiAlias)
         .function("setAlphaf", &SkPaint::setAlphaf)
         .function("setBlendMode", &SkPaint::setBlendMode)
-        .function("_setColor", optional_override([](SkPaint& self, uintptr_t /* float* */ cPtr) {
-            self.setColor(ptrToSkColor4f(cPtr));
+        .function("_setColor", optional_override([](SkPaint& self, uintptr_t /* float* */ cPtr,
+                sk_sp<SkColorSpace> colorSpace) {
+            self.setColor(ptrToSkColor4f(cPtr), colorSpace.get());
         }))
         .function("setColorFilter", &SkPaint::setColorFilter)
         .function("setFilterQuality", &SkPaint::setFilterQuality)
@@ -1272,6 +1293,21 @@
         .function("setStrokeWidth", &SkPaint::setStrokeWidth)
         .function("setStyle", &SkPaint::setStyle);
 
+    class_<SkColorSpace>("SkColorSpace")
+        .smart_ptr<sk_sp<SkColorSpace>>("sk_sp<SkColorSpace>")
+        .class_function("Equals", optional_override([](sk_sp<SkColorSpace> a, sk_sp<SkColorSpace> b)->bool {
+            return SkColorSpace::Equals(a.get(), b.get());
+        }))
+        // These are private because they are to be called once in interface.js to
+        // avoid clients having to delete the returned objects.
+        .class_function("_MakeSRGB", &SkColorSpace::MakeSRGB)
+        .class_function("_MakeDisplayP3", optional_override([]()->sk_sp<SkColorSpace> {
+            return SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB, SkNamedGamut::kDisplayP3);
+        }))
+        .class_function("_MakeAdobeRGB", optional_override([]()->sk_sp<SkColorSpace> {
+            return SkColorSpace::MakeRGB(SkNamedTransferFn::k2Dot2, SkNamedGamut::kAdobeRGB);
+        }));
+
     class_<SkPathEffect>("SkPathEffect")
         .smart_ptr<sk_sp<SkPathEffect>>("sk_sp<SkPathEffect>")
         .class_function("MakeCorner", &SkCornerPathEffect::Make)
@@ -1405,8 +1441,8 @@
         .smart_ptr<sk_sp<SkShader>>("sk_sp<SkShader>")
         .class_function("Blend", select_overload<sk_sp<SkShader>(SkBlendMode, sk_sp<SkShader>, sk_sp<SkShader>)>(&SkShaders::Blend))
         .class_function("_Color",
-            optional_override([](uintptr_t /* float* */ cPtr)->sk_sp<SkShader> {
-                return SkShaders::Color(ptrToSkColor4f(cPtr), SkColorSpace::MakeSRGB());
+            optional_override([](uintptr_t /* float* */ cPtr, sk_sp<SkColorSpace> colorSpace)->sk_sp<SkShader> {
+                return SkShaders::Color(ptrToSkColor4f(cPtr), colorSpace);
             })
         )
         .class_function("Lerp", select_overload<sk_sp<SkShader>(float, sk_sp<SkShader>, sk_sp<SkShader>)>(&SkShaders::Lerp));
@@ -1457,6 +1493,10 @@
         .smart_ptr<sk_sp<SkSurface>>("sk_sp<SkSurface>")
         .function("_flush", select_overload<void()>(&SkSurface::flushAndSubmit))
         .function("getCanvas", &SkSurface::getCanvas, allow_raw_pointers())
+        .function("imageInfo", optional_override([](SkSurface& self)->SimpleImageInfo {
+            const auto& ii = self.imageInfo();
+            return {ii.width(), ii.height(), ii.colorType(), ii.alphaType(), ii.refColorSpace()};
+        }))
         .function("height", &SkSurface::height)
         .function("makeImageSnapshot", select_overload<sk_sp<SkImage>()>(&SkSurface::makeImageSnapshot))
         .function("makeImageSnapshot", select_overload<sk_sp<SkImage>(const SkIRect& bounds)>(&SkSurface::makeImageSnapshot))
@@ -1654,7 +1694,6 @@
         .value("TrianglesStrip",  SkVertices::VertexMode::kTriangleStrip_VertexMode)
         .value("TriangleFan",     SkVertices::VertexMode::kTriangleFan_VertexMode);
 
-
     // A value object is much simpler than a class - it is returned as a JS
     // object and does not require delete().
     // https://emscripten.org/docs/porting/connecting_cpp_and_javascript/embind.html#value-types
@@ -1690,10 +1729,11 @@
         .field("fBottom", &SkIRect::fBottom);
 
     value_object<SimpleImageInfo>("SkImageInfo")
-        .field("width",     &SimpleImageInfo::width)
-        .field("height",    &SimpleImageInfo::height)
-        .field("colorType", &SimpleImageInfo::colorType)
-        .field("alphaType", &SimpleImageInfo::alphaType);
+        .field("width",      &SimpleImageInfo::width)
+        .field("height",     &SimpleImageInfo::height)
+        .field("colorType",  &SimpleImageInfo::colorType)
+        .field("alphaType",  &SimpleImageInfo::alphaType)
+        .field("colorSpace", &SimpleImageInfo::colorSpace);
 
     // SkPoints can be represented by [x, y]
     value_array<SkPoint>("SkPoint")
diff --git a/modules/canvaskit/cpu.js b/modules/canvaskit/cpu.js
index d2e543c..88b57e1 100644
--- a/modules/canvaskit/cpu.js
+++ b/modules/canvaskit/cpu.js
@@ -26,6 +26,10 @@
       CanvasKit.MakeCanvasSurface = CanvasKit.MakeSWCanvasSurface;
     }
 
+    // Note that color spaces are currently not supported in CPU surfaces. due to the limitation
+    // canvas.getContext('2d').putImageData imposes a limitatin of using an RGBA_8888 color type.
+    // TODO(nifong): support WGC color spaces while still using an RGBA_8888 color type when
+    // on a cpu backend.
     CanvasKit.MakeSurface = function(width, height) {
       /* @dict */
       var imageInfo = {
@@ -35,6 +39,7 @@
         // Since we are sending these pixels directly into the HTML canvas,
         // (and those pixels are un-premultiplied, i.e. straight r,g,b,a)
         'alphaType': CanvasKit.AlphaType.Unpremul,
+        'colorSpace': CanvasKit.SkColorSpace.SRGB,
       }
       var pixelLen = width * height * 4; // it's 8888, so 4 bytes per pixel
       // Allocate the buffer of pixels to be drawn into.
diff --git a/modules/canvaskit/externs.js b/modules/canvaskit/externs.js
index ed2a4a6..6add3d4 100644
--- a/modules/canvaskit/externs.js
+++ b/modules/canvaskit/externs.js
@@ -259,6 +259,17 @@
     scaled: function() {},
   },
 
+  SkColorSpace: {
+    Equals: function() {},
+    SRGB: {},
+    DISPLAY_P3: {},
+    ADOBE_RGB: {},
+    // private API (from C++ bindings)
+    _MakeSRGB: function() {},
+    _MakeDisplayP3: function() {},
+    _MakeAdobeRGB: function() {},
+  },
+
   SkContourMeasureIter: {
     next: function() {},
   },
@@ -520,6 +531,7 @@
     // public API (from C++ bindings)
     /** @return {CanvasKit.SkCanvas} */
     getCanvas: function() {},
+    imageInfo: function() {},
     /** @return {CanvasKit.SkImage} */
     makeImageSnapshot: function() {},
     makeSurface: function() {},
diff --git a/modules/canvaskit/gpu.js b/modules/canvaskit/gpu.js
index 10c5038..f4043cc 100644
--- a/modules/canvaskit/gpu.js
+++ b/modules/canvaskit/gpu.js
@@ -41,19 +41,22 @@
         return CanvasKit.currentContext() || 0;
       };
 
-      // arg can be of types:
+      // idOrElement can be of types:
       //  - String - in which case it is interpreted as an id of a
       //          canvas element.
       //  - HTMLCanvasElement - in which the provided canvas element will
       //          be used directly.
-      // Width and height can be provided to override those on the canvas
-      // element, or specify a height for when a context is provided.
-      CanvasKit.MakeWebGLCanvasSurface = function(arg, width, height) {
-        var canvas = arg;
+      // colorSpace - sk_sp<SkColorSpace> - one of the supported color spaces:
+      //          CanvasKit.SkColorSpace.SRGB
+      //          CanvasKit.SkColorSpace.DISPLAY_P3
+      //          CanvasKit.SkColorSpace.ADOBE_RGB
+      CanvasKit.MakeWebGLCanvasSurface = function(idOrElement, colorSpace) {
+        colorSpace = colorSpace || null;
+        var canvas = idOrElement;
         if (canvas.tagName !== 'CANVAS') {
-          canvas = document.getElementById(arg);
+          canvas = document.getElementById(idOrElement);
           if (!canvas) {
-            throw 'Canvas with id ' + arg + ' was not found';
+            throw 'Canvas with id ' + idOrElement + ' was not found';
           }
         }
 
@@ -64,10 +67,6 @@
           throw 'failed to create webgl context: err ' + ctx;
         }
 
-        if (!canvas && (!width || !height)) {
-          throw 'height and width must be provided with context';
-        }
-
         var grcontext = this.MakeGrContext(ctx);
 
         if (grcontext) {
@@ -76,12 +75,10 @@
           grcontext.setResourceCacheLimitBytes(RESOURCE_CACHE_BYTES);
         }
 
-
-        // Maybe better to use clientWidth/height.  See:
-        // https://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html
-        var surface = this.MakeOnScreenGLSurface(grcontext,
-                                                 width  || canvas.width,
-                                                 height || canvas.height);
+        // Note that canvas.width/height here is used because it gives the size of the buffer we're
+        // rendering into. This may not be the same size the element is displayed on the page, which
+        // constrolled by css, and available in canvas.clientWidth/height.
+        var surface = this.MakeOnScreenGLSurface(grcontext, canvas.width, canvas.height, colorSpace);
         if (!surface) {
           SkDebug('falling back from GPU implementation to a SW based one');
           // we need to throw away the old canvas (which was locked to
diff --git a/modules/canvaskit/htmlcanvas/canvas2dcontext.js b/modules/canvaskit/htmlcanvas/canvas2dcontext.js
index f4fc8dd..8ebecce 100644
--- a/modules/canvaskit/htmlcanvas/canvas2dcontext.js
+++ b/modules/canvaskit/htmlcanvas/canvas2dcontext.js
@@ -848,7 +848,8 @@
     }
     var img = CanvasKit.MakeImage(imageData.data, imageData.width, imageData.height,
                                   CanvasKit.AlphaType.Unpremul,
-                                  CanvasKit.ColorType.RGBA_8888);
+                                  CanvasKit.ColorType.RGBA_8888,
+                                  CanvasKit.SkColorSpace.SRGB);
     var src = CanvasKit.XYWHRect(dirtyX, dirtyY, dirtyWidth, dirtyHeight);
     var dst = CanvasKit.XYWHRect(x+dirtyX, y+dirtyY, dirtyWidth, dirtyHeight);
     var inverted = CanvasKit.SkMatrix.invert(this._currentTransform);
diff --git a/modules/canvaskit/interface.js b/modules/canvaskit/interface.js
index 9159f90..31fc6b5 100644
--- a/modules/canvaskit/interface.js
+++ b/modules/canvaskit/interface.js
@@ -8,6 +8,12 @@
 CanvasKit.onRuntimeInitialized = function() {
   // All calls to 'this' need to go in externs.js so closure doesn't minify them away.
 
+  // Create single copies of all three supported color spaces
+  // These are sk_sp<SkColorSpace>
+  CanvasKit.SkColorSpace.SRGB = CanvasKit.SkColorSpace._MakeSRGB();
+  CanvasKit.SkColorSpace.DISPLAY_P3 = CanvasKit.SkColorSpace._MakeDisplayP3();
+  CanvasKit.SkColorSpace.ADOBE_RGB = CanvasKit.SkColorSpace._MakeAdobeRGB();
+
   // Add some helpers for matrices. This is ported from SkMatrix.cpp
   // to save complexity and overhead of going back and forth between
   // C++ and JS layers.
@@ -1007,11 +1013,16 @@
 
   // returns Uint8Array
   CanvasKit.SkCanvas.prototype.readPixels = function(x, y, w, h, alphaType,
-                                                     colorType, dstRowBytes) {
+                                                     colorType, colorSpace, dstRowBytes) {
     // supply defaults (which are compatible with HTMLCanvas's getImageData)
     alphaType = alphaType || CanvasKit.AlphaType.Unpremul;
     colorType = colorType || CanvasKit.ColorType.RGBA_8888;
-    dstRowBytes = dstRowBytes || (4 * w);
+    colorSpace = colorSpace || CanvasKit.SkColorSpace.SRGB;
+    var pixBytes = 4;
+    if (colorType === CanvasKit.ColorType.RGBA_F16) {
+      pixBytes = 8;
+    }
+    dstRowBytes = dstRowBytes || (pixBytes * w);
 
     var len = h * dstRowBytes
     var pptr = CanvasKit._malloc(len);
@@ -1020,6 +1031,7 @@
       'height': h,
       'colorType': colorType,
       'alphaType': alphaType,
+      'colorSpace': colorSpace,
     }, pptr, dstRowBytes, x, y);
     if (!ok) {
       CanvasKit._free(pptr);
@@ -1036,7 +1048,7 @@
   // pixels is a TypedArray. No matter the input size, it will be treated as
   // a Uint8Array (essentially, a byte array).
   CanvasKit.SkCanvas.prototype.writePixels = function(pixels, srcWidth, srcHeight,
-                                                      destX, destY, alphaType, colorType) {
+                                                      destX, destY, alphaType, colorType, colorSpace) {
     if (pixels.byteLength % (srcWidth * srcHeight)) {
       throw 'pixels length must be a multiple of the srcWidth * srcHeight';
     }
@@ -1044,6 +1056,7 @@
     // supply defaults (which are compatible with HTMLCanvas's putImageData)
     alphaType = alphaType || CanvasKit.AlphaType.Unpremul;
     colorType = colorType || CanvasKit.ColorType.RGBA_8888;
+    colorSpace = colorSpace || CanvasKit.SkColorSpace.SRGB;
     var srcRowBytes = bytesPerPixel * srcWidth;
 
     var pptr = CanvasKit._malloc(pixels.byteLength);
@@ -1054,6 +1067,7 @@
       'height': srcHeight,
       'colorType': colorType,
       'alphaType': alphaType,
+      'colorSpace': colorSpace,
     }, pptr, srcRowBytes, destX, destY);
 
     CanvasKit._free(pptr);
@@ -1093,9 +1107,11 @@
     return copyColorFromWasm(cPtr);
   }
 
-  CanvasKit.SkPaint.prototype.setColor = function(color4f) {
+  CanvasKit.SkPaint.prototype.setColor = function(color4f, colorSpace) {
+    colorSpace = colorSpace || null; // null will be replaced with sRGB in the C++ method.
+    // emscripten wouldn't bind undefined to the sk_sp<SkColorSpace> expected here.
     var cPtr = copy1dArray(color4f, CanvasKit.HEAPF32);
-    this._setColor(cPtr);
+    this._setColor(cPtr, colorSpace);
     CanvasKit._free(cPtr);
   }
 
@@ -1160,21 +1176,23 @@
     return dpe;
   }
 
-  CanvasKit.SkShader.Color = function(color4f) {
+  CanvasKit.SkShader.Color = function(color4f, colorSpace) {
+    colorSpace = colorSpace || null
     var cPtr = copy1dArray(color4f, CanvasKit.HEAPF32);
-    var result = CanvasKit.SkShader._Color(cPtr);
+    var result = CanvasKit.SkShader._Color(cPtr, colorSpace);
     CanvasKit._free(cPtr);
     return result;
   }
 
-  CanvasKit.SkShader.MakeLinearGradient = function(start, end, colors, pos, mode, localMatrix, flags) {
+  CanvasKit.SkShader.MakeLinearGradient = function(start, end, colors, pos, mode, localMatrix, flags, colorSpace) {
+    colorSpace = colorSpace || null
     var colorPtr = copy2dArray(colors, CanvasKit.HEAPF32);
     var posPtr =   copy1dArray(pos,    CanvasKit.HEAPF32);
     flags = flags || 0;
     var localMatrixPtr = copy3x3MatrixToWasm(localMatrix);
 
     var lgs = CanvasKit._MakeLinearGradientShader(start, end, colorPtr, posPtr,
-                                                  colors.length, mode, flags, localMatrixPtr);
+                                                  colors.length, mode, flags, localMatrixPtr, colorSpace);
 
     CanvasKit._free(localMatrixPtr);
     CanvasKit._free(colorPtr);
@@ -1182,14 +1200,15 @@
     return lgs;
   }
 
-  CanvasKit.SkShader.MakeRadialGradient = function(center, radius, colors, pos, mode, localMatrix, flags) {
+  CanvasKit.SkShader.MakeRadialGradient = function(center, radius, colors, pos, mode, localMatrix, flags, colorSpace) {
+    colorSpace = colorSpace || null
     var colorPtr = copy2dArray(colors, CanvasKit.HEAPF32);
     var posPtr =   copy1dArray(pos,    CanvasKit.HEAPF32);
     flags = flags || 0;
     var localMatrixPtr = copy3x3MatrixToWasm(localMatrix);
 
     var rgs = CanvasKit._MakeRadialGradientShader(center, radius, colorPtr, posPtr,
-                                                  colors.length, mode, flags, localMatrixPtr);
+                                                  colors.length, mode, flags, localMatrixPtr, colorSpace);
 
     CanvasKit._free(localMatrixPtr);
     CanvasKit._free(colorPtr);
@@ -1197,7 +1216,8 @@
     return rgs;
   }
 
-  CanvasKit.SkShader.MakeSweepGradient = function(cx, cy, colors, pos, mode, localMatrix, flags, startAngle, endAngle) {
+  CanvasKit.SkShader.MakeSweepGradient = function(cx, cy, colors, pos, mode, localMatrix, flags, startAngle, endAngle, colorSpace) {
+    colorSpace = colorSpace || null
     var colorPtr = copy2dArray(colors, CanvasKit.HEAPF32);
     var posPtr =   copy1dArray(pos,    CanvasKit.HEAPF32);
     flags = flags || 0;
@@ -1208,7 +1228,7 @@
     var sgs = CanvasKit._MakeSweepGradientShader(cx, cy, colorPtr, posPtr,
                                                  colors.length, mode,
                                                  startAngle, endAngle, flags,
-                                                 localMatrixPtr);
+                                                 localMatrixPtr, colorSpace);
 
     CanvasKit._free(localMatrixPtr);
     CanvasKit._free(colorPtr);
@@ -1217,7 +1237,8 @@
   }
 
   CanvasKit.SkShader.MakeTwoPointConicalGradient = function(start, startRadius, end, endRadius,
-                                                            colors, pos, mode, localMatrix, flags) {
+                                                            colors, pos, mode, localMatrix, flags, colorSpace) {
+    colorSpace = colorSpace || null
     var colorPtr = copy2dArray(colors, CanvasKit.HEAPF32);
     var posPtr =   copy1dArray(pos,    CanvasKit.HEAPF32);
     flags = flags || 0;
@@ -1225,7 +1246,7 @@
 
     var rgs = CanvasKit._MakeTwoPointConicalGradientShader(
                           start, startRadius, end, endRadius,
-                          colorPtr, posPtr, colors.length, mode, flags, localMatrixPtr);
+                          colorPtr, posPtr, colors.length, mode, flags, localMatrixPtr, colorSpace);
 
     CanvasKit._free(localMatrixPtr);
     CanvasKit._free(colorPtr);
@@ -1335,13 +1356,14 @@
 
 // pixels must be a Uint8Array with bytes representing the pixel values
 // (e.g. each set of 4 bytes could represent RGBA values for a single pixel).
-CanvasKit.MakeImage = function(pixels, width, height, alphaType, colorType) {
+CanvasKit.MakeImage = function(pixels, width, height, alphaType, colorType, colorSpace) {
   var bytesPerPixel = pixels.length / (width * height);
   var info = {
     'width': width,
     'height': height,
     'alphaType': alphaType,
     'colorType': colorType,
+    'colorSpace': colorSpace,
   };
   var pptr = copy1dArray(pixels, CanvasKit.HEAPU8);
   // No need to _free pptr, Image takes it with SkData::MakeFromMalloc
diff --git a/modules/canvaskit/tests/core.spec.js b/modules/canvaskit/tests/core.spec.js
index 137753a..a15da3c 100644
--- a/modules/canvaskit/tests/core.spec.js
+++ b/modules/canvaskit/tests/core.spec.js
@@ -116,6 +116,7 @@
                 const imageInfo = {
                     alphaType: CanvasKit.AlphaType.Unpremul,
                     colorType: CanvasKit.ColorType.RGBA_8888,
+                    colorSpace: CanvasKit.SkColorSpace.SRGB,
                     width: img.width(),
                     height: img.height(),
                 };
@@ -172,7 +173,8 @@
               0,   0, 255, 255, // opaque blue
             255,   0, 255, 100, // transparent purple
         ]);
-        const img = CanvasKit.MakeImage(pixels, 1, 4, CanvasKit.AlphaType.Unpremul, CanvasKit.ColorType.RGBA_8888);
+        const img = CanvasKit.MakeImage(pixels, 1, 4, CanvasKit.AlphaType.Unpremul, CanvasKit.ColorType.RGBA_8888,
+            CanvasKit.SkColorSpace.SRGB);
         canvas.drawImage(img, 1, 1, paint);
         img.delete();
     });
@@ -305,7 +307,8 @@
             [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
             [0, 0.65, 1.0],
             CanvasKit.TileMode.Mirror,
-            CanvasKit.SkMatrix.skewed(0.5, 0, 100, 100)
+            CanvasKit.SkMatrix.skewed(0.5, 0, 100, 100),
+            null, // color space
         );
         paint.setShader(rgsSkew);
         r = CanvasKit.LTRBRect(0, 100, 100, 200);
@@ -318,7 +321,8 @@
             [0, 0.65, 1.0],
             CanvasKit.TileMode.Mirror,
             CanvasKit.SkMatrix.skewed(0.5, 0, 100, 100),
-            1 // interpolate colors in premul
+            1, // interpolate colors in premul
+            null, // color space
         );
         paint.setShader(rgsSkewPremul);
         r = CanvasKit.LTRBRect(100, 100, 200, 200);
@@ -350,7 +354,8 @@
             [10, 110], 60, // end, radius
             [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
             [0, 0.65, 1.0],
-            CanvasKit.TileMode.Mirror
+            CanvasKit.TileMode.Mirror,
+            null, // color space
         );
         paint.setShader(cgs);
         let r = CanvasKit.LTRBRect(0, 0, 100, 100);
@@ -365,6 +370,7 @@
             CanvasKit.TileMode.Mirror,
             null, // no local matrix
             1, // interpolate colors in premul
+            null, // color space
         );
         paint.setShader(cgsPremul);
         r = CanvasKit.LTRBRect(100, 0, 200, 100);
@@ -377,7 +383,8 @@
             [transparentGreen, CanvasKit.BLUE, CanvasKit.RED],
             [0, 0.65, 1.0],
             CanvasKit.TileMode.Mirror,
-            CanvasKit.SkMatrix.rotated(Math.PI/4, 0, 100)
+            CanvasKit.SkMatrix.rotated(Math.PI/4, 0, 100),
+            null, // color space
         );
         paint.setShader(cgs45);
         r = CanvasKit.LTRBRect(0, 100, 100, 200);
@@ -391,7 +398,8 @@
             [0, 0.65, 1.0],
             CanvasKit.TileMode.Mirror,
             CanvasKit.SkMatrix.rotated(Math.PI/4, 100, 100),
-            1 // interpolate colors in premul
+            1, // interpolate colors in premul
+            null, // color space
         );
         paint.setShader(cgs45Premul);
         r = CanvasKit.LTRBRect(100, 100, 200, 200);
@@ -585,6 +593,83 @@
         expect(paint.getColor()).toEqual(Float32Array.of(3.3, 2.2, 1.1, 0.5));
     });
 
+    describe('ColorSpace Support', () => {
+        it('Can create an SRGB 8888 surface', () => {
+            const colorSpace = CanvasKit.SkColorSpace.SRGB;
+            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.SkColorSpace.SRGB);
+            expect(surface).toBeTruthy('Could not make surface');
+            let info = surface.imageInfo()
+            expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
+            expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_8888);
+            expect(CanvasKit.SkColorSpace.Equals(info.colorSpace, colorSpace))
+                .toBeTruthy("Surface not created with correct color space.");
+
+            const pixels = surface.getCanvas().readPixels(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
+                CanvasKit.AlphaType.Unpremul, CanvasKit.ColorType.RGBA_8888, colorSpace);
+            expect(pixels).toBeTruthy('Could not read pixels from surface');
+        });
+        it('Can create a Display P3 surface', () => {
+            const colorSpace = CanvasKit.SkColorSpace.DISPLAY_P3;
+            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.SkColorSpace.DISPLAY_P3);
+            expect(surface).toBeTruthy('Could not make surface');
+            if (surface.reportBackendType() !== 'GPU') {
+                console.log('Not expecting color space support in cpu backed suface.');
+                return;
+            }
+            let info = surface.imageInfo()
+            expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
+            expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_F16);
+            expect(CanvasKit.SkColorSpace.Equals(info.colorSpace, colorSpace))
+                .toBeTruthy("Surface not created with correct color space.");
+
+            const pixels = surface.getCanvas().readPixels(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
+                CanvasKit.AlphaType.Unpremul, CanvasKit.ColorType.RGBA_F16, colorSpace);
+            expect(pixels).toBeTruthy('Could not read pixels from surface');
+        });
+        it('Can create an Adobe RGB surface', () => {
+            const colorSpace = CanvasKit.SkColorSpace.ADOBE_RGB;
+            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.SkColorSpace.ADOBE_RGB);
+            expect(surface).toBeTruthy('Could not make surface');
+            if (surface.reportBackendType() !== 'GPU') {
+                console.log('Not expecting color space support in cpu backed suface.');
+                return;
+            }
+            let info = surface.imageInfo()
+            expect(info.alphaType).toEqual(CanvasKit.AlphaType.Unpremul);
+            expect(info.colorType).toEqual(CanvasKit.ColorType.RGBA_F16);
+            expect(CanvasKit.SkColorSpace.Equals(info.colorSpace, colorSpace))
+                .toBeTruthy("Surface not created with correct color space.");
+
+            const pixels = surface.getCanvas().readPixels(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT,
+                CanvasKit.AlphaType.Unpremul, CanvasKit.ColorType.RGBA_F16, colorSpace);
+            expect(pixels).toBeTruthy('Could not read pixels from surface');
+        });
+
+        it('combine draws from several color spaces', () => {
+            const surface = CanvasKit.MakeCanvasSurface('test', CanvasKit.SkColorSpace.ADOBE_RGB);
+            expect(surface).toBeTruthy('Could not make surface');
+            if (surface.reportBackendType() !== 'GPU') {
+                console.log('Not expecting color space support in cpu backed suface.');
+                return;
+            }
+            const canvas = surface.getCanvas();
+
+            let paint = new CanvasKit.SkPaint();
+            paint.setColor(CanvasKit.RED, CanvasKit.SkColorSpace.ADOBE_RGB);
+            canvas.drawPaint(paint);
+            paint.setColor(CanvasKit.RED, CanvasKit.SkColorSpace.DISPLAY_P3); // 93.7 in adobeRGB
+            canvas.drawRect(CanvasKit.LTRBRect(200, 0, 400, 600), paint);
+            paint.setColor(CanvasKit.RED, CanvasKit.SkColorSpace.SRGB); // 85.9 in adobeRGB
+            canvas.drawRect(CanvasKit.LTRBRect(400, 0, 600, 600), paint);
+
+            // this test paints three bands of red, each the maximum red that a color space supports.
+            // They are each represented by skia by some color in the Adobe RGB space of the surface,
+            // as floats between 0 and 1.
+
+            // TODO(nifong) readpixels and verify correctness after f32 readpixels bug is fixed
+        });
+    }); // end describe('ColorSpace Support')
+
     describe('DOMMatrix support', () => {
         gm('sweep_gradient_dommatrix', (canvas) => {
             const paint = new CanvasKit.SkPaint();