What you've described is a blit operation (copying a block of pixels from a source, such as a texture, in your case a solid color). Probably you wouldn't write this out but would write:
blit(box.x,box.y,box.w,box.h,RED)
In shader-land, this is equivalent to rendering a rectangle, with a texture or solid color as source. Sure it's more involved to implement this abstraction, since you need a mesh, need to write a small shader, be familiar with the render pipeline state etc, but it also gives you some stuff trivially, like anti-aliasing, and scaling support for the blit operation.
Many libraries already implement this stuff on top of WebGL, like pixi.js
While I don't doubt the creative possibilities of working with pixels directly, once you figure out how GPUs work, a lot of 2D stuff is actually pretty easy.
Many libraries already implement this stuff on top of WebGL, like pixi.js
While I don't doubt the creative possibilities of working with pixels directly, once you figure out how GPUs work, a lot of 2D stuff is actually pretty easy.