Web: Add Canvas element (#1823)

Co-authored-by: hfhbd <hfhbd@users.noreply.github.com>

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/attributes/Attrs.kt

@@ -1,9 +1,11 @@
 package org.jetbrains.compose.web.attributes
 
 import org.jetbrains.compose.web.attributes.builders.saveControlledInputState
+import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.events.SyntheticSubmitEvent
 import org.w3c.dom.HTMLAnchorElement
 import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.HTMLFormElement
 import org.w3c.dom.HTMLImageElement
 import org.w3c.dom.HTMLInputElement
@@ -329,3 +331,9 @@ fun AttrsScope<HTMLTableCellElement>.colspan(value: Int): AttrsScope<HTMLTableCe
 fun AttrsScope<HTMLTableCellElement>.rowspan(value: Int): AttrsScope<HTMLTableCellElement> =
     attr("rowspan", value.toString())
 
+/* Canvas attributes */
+fun AttrsScope<HTMLCanvasElement>.width(value: CSSSizeValue<out CSSUnitLengthOrPercentage>) =
+    attr("width", value.toString())
+
+fun AttrsScope<HTMLCanvasElement>.height(value: CSSSizeValue<out CSSUnitLengthOrPercentage>) =
+    attr("height", value.toString())

web/core/src/jsMain/kotlin/org/jetbrains/compose/web/elements/Elements.kt

@@ -17,6 +17,7 @@ import org.w3c.dom.HTMLAreaElement
 import org.w3c.dom.HTMLAudioElement
 import org.w3c.dom.HTMLBRElement
 import org.w3c.dom.HTMLButtonElement
+import org.w3c.dom.HTMLCanvasElement
 import org.w3c.dom.HTMLDataListElement
 import org.w3c.dom.HTMLDivElement
 import org.w3c.dom.HTMLElement
@@ -93,6 +94,7 @@ private val Object: ElementBuilder<HTMLObjectElement> = ElementBuilderImplementa
 private val Param: ElementBuilder<HTMLParamElement> = ElementBuilderImplementation("param")
 private val Picture: ElementBuilder<HTMLPictureElement> = ElementBuilderImplementation("picture")
 private val Source: ElementBuilder<HTMLSourceElement> = ElementBuilderImplementation("source")
+private val Canvas: ElementBuilder<HTMLCanvasElement> = ElementBuilderImplementation("canvas")
 
 private val Div: ElementBuilder<HTMLDivElement> = ElementBuilderImplementation("div")
 private val A: ElementBuilder<HTMLAnchorElement> = ElementBuilderImplementation("a")
@@ -414,6 +416,18 @@ fun Source(
     )
 }
 
+@Composable
+fun Canvas(
+    attrs: AttrBuilderContext<HTMLCanvasElement>? = null,
+    content: ContentBuilder<HTMLCanvasElement>? = null
+) {
+    TagElement(
+        elementBuilder = Canvas,
+        applyAttrs = attrs,
+        content = content
+    )
+}
+
 @OptIn(ComposeWebInternalApi::class)
 @Composable
 fun Text(value: String) {

web/core/src/jsTest/kotlin/elements/AttributesTests.kt

@@ -550,4 +550,15 @@ class AttributesTests {
         check(InputMode.Search, "search")
         check(InputMode.Url, "url")
     }
+
+    @Test
+    fun canvasAttributeTest() = runTest {
+        composition {
+            Canvas({
+                height(400.px)
+                width(400.px)
+            })
+        }
+        assertEquals("""<canvas height="400px" width="400px"></canvas>""",root.innerHTML)
+    }
 }

web/core/src/jsTest/kotlin/elements/ElementsTests.kt

@@ -45,6 +45,7 @@ class ElementsTests {
             Pair({ Param() }, "PARAM"),
             Pair({ Picture() }, "PICTURE"),
             Pair({ Source() }, "SOURCE"),
+            Pair({ Canvas() }, "CANVAS"),
 
             Pair({ Div() }, "DIV"),
             Pair({ A() }, "A"),