diff --git a/renderers/web/canvas2d/clay-canvas2d-renderer.html b/renderers/web/canvas2d/clay-canvas2d-renderer.html
index 7907121..76b12d5 100644
--- a/renderers/web/canvas2d/clay-canvas2d-renderer.html
+++ b/renderers/web/canvas2d/clay-canvas2d-renderer.html
@@ -317,7 +317,9 @@
         for (let i = 0; i < length; i++, arrayOffset += renderCommandSize) {
             let renderCommand = readStructAtAddress(arrayOffset, renderCommandDefinition);
             let boundingBox = renderCommand.boundingBox;
-            switch(renderCommand.commandType.value) {
+            
+            // note: commandType is packed to uint8_t and has 3 garbage bytes of padding
+            switch(renderCommand.commandType.value & 0xff) {
                 case (CLAY_RENDER_COMMAND_TYPE_NONE): {
                     break;
                 }
diff --git a/renderers/web/html/clay-html-renderer.html b/renderers/web/html/clay-html-renderer.html
index e853772..73b547c 100644
--- a/renderers/web/html/clay-html-renderer.html
+++ b/renderers/web/html/clay-html-renderer.html
@@ -336,7 +336,7 @@
             let element = null;
             if (!elementCache[renderCommand.id.value]) {
                 let elementType = 'div';
-                switch (renderCommand.commandType.value) {
+                switch (renderCommand.commandType.value & 0xff) {
                     case CLAY_RENDER_COMMAND_TYPE_RECTANGLE: {
                         if (readStructAtAddress(renderCommand.config.value, rectangleConfigDefinition).link.length.value > 0) {
                             elementType = 'a';
@@ -384,7 +384,8 @@
                 element.style.height = Math.round(renderCommand.boundingBox.height.value) + 'px';
             }
 
-            switch(renderCommand.commandType.value) {
+            // note: commandType is packed to uint8_t and has 3 garbage bytes of padding
+            switch(renderCommand.commandType.value & 0xff) {
                 case (CLAY_RENDER_COMMAND_TYPE_NONE): {
                     break;
                 }