Текст перед фоном Quil canvas app

Question

Я написал приложение веб-страницы Clojurescript Quil, которое состоит из объектов, плавающих вокруг. Эта «игра» предназначена для обычного текста html. У Quil есть текстовые возможности, но я не нашел примеров того, что мне нужно сделать. В идеале я хотел бы, чтобы текст веб-страницы отображался на слое над игрой, используя что-то вроде Sablono, и не нужно беспокоиться о проблемах прозрачности или о любых других проблемах - игра просто находится в фоновом режиме!

Если вы не можете просто поместить Quil на слой ниже, то я уверен, что смогу сделать это в Quil, но будет много деталей для сортировки: z-ordering, с текстом сохраните свой цвет, имея фон прямоугольника, который содержит символ, прозрачный и т. д. - многие проблемы, которые я бы хотел избежать.

Каков самый простой способ иметь слой html-текста поверх слоя холста с учетом этой настройки?

Ниже приведено то, что я до сих пор придумал, что рисует текст в той же функции, что и анимация, но после анимации. Не совсем то, что я ищу, но что, возможно, придется сделать:

(ns scratch.core 
    (:require [quil.core :as q :include-macros true] 
      [quil.middleware :as m])) 

(def dark-blue [0,0,139]) 

(defn setup [] 
    (q/text-font (q/create-font "DejaVu Sans" 28 true)) 
    (q/frame-rate 15) 
    ; Set color mode to HSB (HSV) instead of default RGB. 
    ;(q/color-mode :hsb) 
    ; setup function returns initial state. It contains 
    ; circle color and position. 
    {:color 0 
    :angle 0}) 

(defn draw-text 
    [] 
    (apply q/fill dark-blue) 
    (q/text "The quick, brown fox jumped over the lazy dog" 
      100 200 300 200)) 

(defn update-state [state] 
    ; Update sketch state by changing circle color and position. 
    {:color (mod (+ (:color state) 0.7) 255) 
    :angle (+ (:angle state) 0.1)}) 

(defn draw-state [state] 
    ; Clear the sketch by filling it with light-grey color. 
    (q/background 240) 
    ; Set circle color. 
    (q/fill (:color state) 255 255) 
    ; Calculate x and y coordinates of the circle. 
    (let [angle (:angle state) 
     x (* 150 (* 0.4 (q/cos angle))) 
     y (* 150 (* 0.4 (q/sin angle)))] 
    ; Move origin point to the center of the sketch. 
    (q/with-translation [(/ (q/width) 2) 
         (/ (q/height) 2)] 
     ; Draw the circle. 
     (q/ellipse x y 100 100))) 
    ;; Simply make sure the text is drawn after the 'background' 
    (draw-text)) 

(q/defsketch moving-ball 
    :host "moving-ball" 
    :size [500 500] 
    :setup setup 
    :update update-state 
    :draw draw-state 
    :middleware [m/fun-mode]) 

Answer 1

Вот этот вопрос несколько ответил elsewhere. Однако подход обходного пути, используемый в тексте текста вопроса на холсте, вероятно, будет достаточно хорошим для моего использования.